KeyboardInsetsView 支持webview富文本场景吗

[dotaeye]

尝试在富文本中使用，键盘出来的位置不对，且整个导航都不见了

import React, {
  useState,
  useEffect,
  useCallback,
  useRef,
  useContext,
} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
  BackHandler,
  Platform,
  Image,
  findNodeHandle,
  Animated,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {Navbar} from '../../components';
import {KeyboardInsetsView, getEdgeInsetsForView} from '@sdcx/keyboard-insets';
import {WebView} from 'react-native-webview';
import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
import {useSetState} from 'ahooks';
import FontContext from '@/context/FontContext';
import {ViewDriver} from './driver/ViewDriver';
import {Driver} from './driver/Driver';
import {KeyboardDriver} from './driver/KeyboardDriver';
import {SafeAreaView} from 'react-native-safe-area-context';

const commands = {
  BOLD: 'BOLD',
  ITALIC: 'ITALIC',
  UL: 'unordered-list-item',
  OL: 'ordered-list-item',
  BLOCKQUOTE: 'blockquote',
  IMAGE: 'insert-image',
  CAMERA: 'open-camera',
  FONT: 'change-font',
};

const defaultActions = [
  {
    label: 'Bold',
    command: commands.BOLD,
    textIcon: 'format-bold',
    inline: true,
  },
  {
    label: 'Italic',
    command: commands.ITALIC,
    textIcon: 'format-italic',
    inline: true,
  },
  {
    label: 'UL',
    command: commands.UL,
    textIcon: 'format-list-bulleted',
    block: true,
  },
  {
    label: 'OL',
    command: commands.OL,
    textIcon: 'format-list-numbered',
    block: true,
  },
  {
    label: 'BLOCKQUOTE',
    command: commands.BLOCKQUOTE,
    textIcon: 'format-quote-open',
    block: true,
  },
  {
    label: 'IMAGE',
    command: commands.IMAGE,
    textIcon: 'image',
    block: true,
  },
  {
    label: 'CAMERA',
    command: commands.CAMERA,
    textIcon: 'camera',
    block: true,
  },
  {
    label: 'FONT',
    command: commands.FONT,
    textIcon: 'format-font',
    block: true,
    navigation: true,
  },
];

const WriteLetter: React.FC = () => {
  const navigation = useNavigation();
  const {globalFontName, fontData} = useContext(FontContext);

  const injectedScript = `
      window.ENV_RN = true;
      window.__Editor_Fonts = ${JSON.stringify(fontData)};
    `;

  const webviewRef = useRef<WebView | null>(null);
  const [blockState, setBlockState] = useSetState({
    block: '',
    style: [],
  });
  const [showTabbar, setShowTabbar] = useState(false);

  const inputRef = useRef<TextInput>(null); // 输入框
  const senderRef = useRef<View>(null); // 发送框
  const [bottom, setBottom] = useState(0); // 底部距离

  const onLayout = useCallback(() => {
    const viewTag = findNodeHandle(senderRef.current);
    if (viewTag === null) {
      return;
    }

    getEdgeInsetsForView(viewTag, insets => {
      console.log('onLayout', insets);
      setBottom(insets.bottom!);
    });
  }, []);

  const emoji = useRef(new ViewDriver('emoji')).current;
  const toolbox = useRef(new ViewDriver('toolbox')).current;
  const keyboard = useRef(
    new KeyboardDriver(inputRef, () => {
      webviewRef.current?.postMessage(
        JSON.stringify({
          messageType: 'richEditor',
          type: 'SHOW_TOOLBAR',
        }),
      );
    }),
  ).current;

  const [driver, setDriver] = useState<Driver>();
  const [translateY, setTranslateY] = useState(new Animated.Value(0));
  const driverState = {bottom, driver, setDriver, setTranslateY};

  const mainStyle = {
    transform: [
      {
        translateY: translateY,
      },
    ],
  };

  const onMessage = useCallback(
    (event: {nativeEvent: {data?: string}}) => {
      console.log('receive message', event.nativeEvent.data);
      const action = JSON.parse(event.nativeEvent.data || '{}');

      if (action.messageType !== 'richEditor') return;

      if (action.type === 'SHOW_TOOLBAR') {
        if (showTabbar) return;
        setShowTabbar(true);
        console.log('SHOW_TOOLBAR', action);
      } else if (action.type === 'HIDE_TOOLBAR') {
        if (!showTabbar) return;
        setShowTabbar(false);
      } else if (action.type === 'GET_CONTENT') {
        console.log('GET_CONTENT', action);
      } else {
        setBlockState(action);
      }
    },
    [showTabbar],
  );

  const onSendCommand = useCallback((action: any) => {
    if (action.navigation) {
      navigation.navigate('FontList');
      return;
    }
    if (webviewRef.current) {
      console.log('onSendCommand', action);
    }
    webviewRef.current?.postMessage(
      JSON.stringify({
        messageType: 'richEditor',
        type: 'DOCUMENT_COMMAND',
        ...action,
      }),
    );
  }, []);

  const enableFont = useCallback(
    (font: any) => {
      console.log('enableFont-send to webview', font);
      webviewRef.current?.postMessage(
        JSON.stringify({
          messageType: 'richEditor',
          type: 'ENABLE_FONT',
          data: font,
        }),
      );
    },
    [globalFontName],
  );

  useEffect(() => {
    const currentFont = fontData.find(
      item => item.scriptName === globalFontName,
    );
    enableFont(currentFont);
    if (webviewRef.current) {
      webviewRef.current.postMessage(
        JSON.stringify({
          messageType: 'richEditor',
          type: 'SET_CONTENT',
          content: '',
        }),
      );
    }
  }, [globalFontName]);

  const selectItems = [blockState.block, ...blockState.style];

  return (
    <View style={[styles.container]}>
      <Navbar
        title="富文本测试"
        left={{
          goBack: true,
        }}
        navigation={navigation}
      />
      <KeyboardInsetsView
        onKeyboard={keyboard.createCallback(driverState)}
        style={[
          {
            flex: 1,
          },
          mainStyle,
        ]}>
        <WebView
          ref={webviewRef}
          source={{
            uri: `${
              Platform.OS === 'android' ? 'file:///android_asset/' : ''
            }Web.bundle/index.html`,
          }}
          originWhitelist={['*']}
          webviewDebuggingEnabled
          injectedJavaScriptBeforeContentLoaded={injectedScript}
          injectedJavaScriptObject={fontData}
          hideKeyboardAccessoryView
          onMessage={onMessage}
          style={{
            flex: 1,
          }}
        />
        <View
          style={{
            height: showTabbar ? 48 : 0,
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'flex-start',
            alignItems: 'center',
            backgroundColor: 'rgb(199,202,209)',
          }}
          ref={senderRef}
          onLayout={onLayout}>
          {defaultActions.map((item, index) => {
            return (
              <TouchableOpacity
                key={index}
                onPress={() => {
                  if (item.command === commands.FONT) {
                    emoji.shown ? keyboard.show() : emoji.show(driverState);
                  } else if (item.command === commands.IMAGE) {
                    toolbox.toggle(driverState);
                  } else {
                    onSendCommand(item);
                  }
                }}
                style={{
                  width: 48,
                  height: 48,
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: selectItems.includes(item.command)
                    ? '#eee'
                    : 'rgb(199,202,209)',
                }}>
                <MaterialDesignIcons
                  name={item.textIcon}
                  size={24}
                  color={'#000'}
                />
              </TouchableOpacity>
            );
          })}
        </View>
      </KeyboardInsetsView>
      <SafeAreaView edges={['bottom']} />

      <Animated.View
        style={[styles.absolute, styles.red, emoji.style]}
        onLayout={emoji.onLayout}>
        <View style={styles.emoji}>
          <Text style={styles.text}>表情包</Text>
        </View>
        <SafeAreaView edges={['bottom']} />
      </Animated.View>
      <Animated.View
        style={[styles.absolute, styles.blue, toolbox.style]}
        onLayout={toolbox.onLayout}>
        <View style={styles.toolbox}>
          <Text style={styles.text}>工具箱</Text>
        </View>
        <SafeAreaView edges={['bottom']} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  absolute: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  emoji: {
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
  },
  blue: {
    backgroundColor: 'darkkhaki',
  },
  red: {
    backgroundColor: 'cadetblue',
  },
  toolbox: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 48,
    color: 'darkgray',
  },

  navBarRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  navBarButton: {
    padding: 8,
    marginLeft: 8,
  },

  sendTime: {
    fontSize: 12,
    opacity: 0.7,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
  },
  editorContainer: {
    flex: 1,
    margin: 16,
    borderRadius: 8,
    padding: 16,
  },
  titleInput: {
    fontSize: 18,
    fontWeight: 'bold',
    paddingVertical: 12,
    borderBottomWidth: 1,
    marginBottom: 16,
  },
  contentInput: {
    fontSize: 16,
    lineHeight: 24,
    minHeight: 200,
    textAlignVertical: 'top',
  },
  wordCount: {
    alignItems: 'flex-end',
    marginTop: 8,
  },
  wordCountText: {
    fontSize: 12,
    opacity: 0.7,
  },
  toolbar: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderTopWidth: 1,
  },
  toolbarButton: {
    padding: 8,
    marginRight: 16,
  },
  toolbarSpacer: {
    flex: 1,
  },
  draftButton: {
    minWidth: 80,
  },
});

export default WriteLetter;

[listenzz]

给个直接能跑的 demo

[dotaeye]

demo 不太好提供，富文本那块是打包的资源，被控制了发不到外面，可以用空白的webview样式 {flex:1}，里嵌入一个contenteditable的 div，就可以稳定复现，因为没有input了，我将富文本的toolbar作为sender，获取其位置

[listenzz]

参考：

// useRekeyboard

import {
    KeyboardPositionChangedEventData,
    KeyboardStatusChangedEventData,
} from '@sdcx/keyboard-insets';
import { useCallback } from 'react';
import { useSharedValue } from 'react-native-reanimated';

export function useRekeyboard() {
    const position = useSharedValue(0);
    const height = useSharedValue(0);
    const shown = useSharedValue(false);
    const transitioning = useSharedValue(false);

    const onStatusChanged = useCallback(
        (e: KeyboardStatusChangedEventData) => {
            'worklet';
            shown.value = e.shown;
            transitioning.value = e.transitioning;
            height.value = e.height;
        },
        [shown, transitioning, height]
    );

    const onPositionChanged = useCallback(
        (e: KeyboardPositionChangedEventData) => {
            'worklet';
            position.value = e.position;
        },
        [position]
    );

    const keyboard = {
        position,
        height,
        shown,
        transitioning,
    };

    return { keyboard, onStatusChanged, onPositionChanged };
}

// RekeyboardInsetsView
import React, { PropsWithChildren } from 'react';

import {
    KeyboardPositionChangedEvent,
    KeyboardPositionChangedEventData,
    KeyboardStatusChangedEvent,
    KeyboardStatusChangedEventData,
    NativeKeyboardInsetsView,
} from '@sdcx/keyboard-insets';

import { ViewProps } from 'react-native';
import Reanimated, { AnimatedProps, useEvent, useHandler } from 'react-native-reanimated';

export interface KeyboardState {
    height: number;
    shown: boolean;
    transitioning: boolean;
}

interface KeyboardInsetsViewProps
    extends AnimatedProps<typeof NativeKeyboardInsetsView>,
        PropsWithChildren<ViewProps> {
    onPositionChanged: (e: KeyboardPositionChangedEventData) => void;
    onStatusChanged: (e: KeyboardStatusChangedEventData) => void;
}

const NativeKeyboardInsetsViewReanimated =
    Reanimated.createAnimatedComponent(NativeKeyboardInsetsView);

export function RekeyboardInsetsView(props: KeyboardInsetsViewProps) {
    const { children, onPositionChanged, onStatusChanged, ...rest } = props;

    const handlePositionChanged = useKeyboardPositionChangedHandler(
        {
            onPositionChanged: e => {
                'worklet';
                onPositionChanged?.(e);
            },
        },
        [onPositionChanged]
    );

    const handleStatusChanged = useKeyboardStatusChangedHandler(
        {
            onStatusChanged: e => {
                'worklet';
                onStatusChanged?.(e);
            },
        },
        [onStatusChanged]
    );

    return (
        <NativeKeyboardInsetsViewReanimated
            mode="manual"
            onStatusChanged={handleStatusChanged}
            onPositionChanged={handlePositionChanged}
            {...rest}>
            {children}
        </NativeKeyboardInsetsViewReanimated>
    );
}

interface CustomKeyboardPositionChangedEventData extends KeyboardPositionChangedEventData {
    eventName: string;
}

function useKeyboardPositionChangedHandler<TContext extends Record<string, unknown>>(
    handlers: {
        onPositionChanged: (e: KeyboardPositionChangedEventData, ctx: TContext) => void;
    },
    dependencies?: Array<unknown>
) {
    const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

    return useEvent<KeyboardPositionChangedEvent>(
        event => {
            'worklet';
            const { onPositionChanged } = handlers;
            if (
                onPositionChanged &&
                (event as CustomKeyboardPositionChangedEventData).eventName.endsWith(
                    'onPositionChanged'
                )
            ) {
                onPositionChanged(event, context);
            }
        },
        ['onPositionChanged'],
        doDependenciesDiffer
    );
}

interface CustomKeyboardStatusChangedEventData extends KeyboardStatusChangedEventData {
    eventName: string;
}

function useKeyboardStatusChangedHandler<TContext extends Record<string, unknown>>(
    handlers: {
        onStatusChanged: (e: KeyboardStatusChangedEventData, ctx: TContext) => void;
    },
    dependencies?: Array<unknown>
) {
    const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

    return useEvent<KeyboardStatusChangedEvent>(
        event => {
            'worklet';
            const { onStatusChanged } = handlers;
            if (
                onStatusChanged &&
                (event as CustomKeyboardStatusChangedEventData).eventName.endsWith(
                    'onStatusChanged'
                )
            ) {
                onStatusChanged(event, context);
            }
        },
        ['onStatusChanged'],
        doDependenciesDiffer
    );
}

// WriteLetter
function WriteLetter() {
    const { onPositionChanged, onStatusChanged, keyboard } = useRekeyboard();

    const animatedStyles = useAnimatedStyle(() => {
        return {
            paddingBottom: keyboard.shown.value ? keyboard.height.value : 0,
            width: '100%',
        };
    }, []);


    return (
        <View
            style={[
                styles.container,
            ]}>
            <RekeyboardInsetsView
                style={styles.container}
                onPositionChanged={onPositionChanged}
                onStatusChanged={onStatusChanged}>
                <WebView
                    overScrollMode="never"
                    hideKeyboardAccessoryView={true}
                    scrollEnabled={false}
                    sharedCookiesEnabled
                    style={styles.webview}
                    ref={webviewRef}                   
                />
                <Reanimated.View style={animatedStyles} />
            </RekeyboardInsetsView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    webview: {
        flex: 1,
    },
}

[dotaeye]

@listenzz 你收下邮件，详细咨询