RN-第三方之react-native-root-modal、或者modal实现侧栏效果

Posted 2023-04-26

参考技术A 1、点击按钮弹出modal（没有背景色），在modal上面加了一个leftView，当modal显示的时候，leftView有一个从左到右的动画效果
2、关于中间渐变的黑色图层，当modal显示的时候，在页面上添加了一个opacityView（透明的），动画效果的透明度改变，和leftView的动画一起进行。
3、点击黑色的背景隐藏leftView,其实modal上的View有两个子view，一个是leftView（宽度 = 屏幕的宽 - 100），一个是右侧的透明的TouchableOpacity（宽度 = 100），点击TouchableOpacity隐藏modal

WebView JS与RN进行通讯

RN0.37终于官方增加了WebView与React Native的通讯，之前一真使用的是第三方控件React-Native-WebView-Bridge，但不是知道怎么回事这个第三方控件喊了很长时间最终却是另一作者提交了该功能的官方版本。言归正转，由于Web的需求丰富多样所以如果不能实现WebView里的JS与RN的通讯的话，就显得特别不方便，下面代码示例如何获取当前的WebView Title,（实时Title，第一次加载的标题RN有Nativestate的方式获取，但如果Title被动态变更的话通过该办法就获取不了）。

import React, { Component } from \'react\';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView,
  Button,
} from \'react-native\';

export default class RN37 extends Component {
  webview = null;
  //执行JS代码，会被转为字符串，使用injectedJavaScript方法用eval执行字符串方法
  postMessage = () => {
    if (this.webview) {
      this.webview.postMessage(\'window.postMessage("Title："+document.title);\');
    }
  }

  //接收WebView JS事件消息
  onMessage = e => {
    alert(e.nativeEvent.data);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button enabled onPress={this.postMessage} title="Send Message to Web View" />
        <WebView
          ref={webview => { this.webview = webview; } }
          style={{
            flex: 1,
            width:360,
          }}
          injectedJavaScript="document.addEventListener(\'message\', function(e) {eval(e.data);});"
          source={{uri:"https://www.baidu.com"}}
          onMessage={this.onMessage}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: \'center\',
    alignItems: \'center\',
    backgroundColor: \'#F5FCFF\',
  }
});

AppRegistry.registerComponent(\'RN37\', () => RN37);

执行效果