【RN】- 撸个登录页

简介

React Native源码分析这篇文章算是学习RN跨平台开发的开始，文章简单对RN源码进行了分析，并实现了将RN使用在Fragment组件中。而这边文章算是自己写的第一个RN例子。

学习资源

React Native中文网
React Native官网例子

效果

ggggg.gif

实现

页面整体UI全都是RN提供的标准组件实现。弹框用的是Modal。这个可以去看一下官网的使用说明即可。唯一值得一说是RN手势的使用。

手势

  componentWillMount(){
    this._panResponder = PanResponder.create({
      // 单击手势是否可以成为响应者
      onStartShouldSetPanResponder:(evt,gs) => true,
      // 移动手势是否可以成为响应者
      onMoveShouldSetPanResponder:  (evt, gs) => true,
    // 与onStartShouldSetPanResponder相同，当此组件A里包含了子组件B也为触摸事件响应者时，若此时设为true，则父组件A优先级更高
      onStartShouldSetPanResponderCapture: (evt, gestureState) => {
        return false
      },
      // 拦截子组件的移动手势传递,是否拦截
      onMoveShouldSetPanResponderCapture: (evt, gs) => true,
      // 单击手势监听回调
      onPanResponderGrant: (evt, gs) => {
        console.log(`onPanResponderGrant call: gs=` ,gs);
        l = this.state.lastMarginLeft + gs.dx;
        l = l <= 22 ? 22 : l;
        this.setState({
          marginLeft:l,
        })
      },
      // 手势申请失败,未成为响应者的回调
      onResponderReject: (e) => {
        // 申请失败,其他组件未释放响应者
        console.log('onResponderReject==>' + '响应者申请失败')
      },
      // 移动手势监听回调
      onPanResponderMove: (evt, gs) => {
        console.log(`gs.X : ${gs.dx}   Y : ${gs.dy}`);
        l = this.state.lastMarginLeft + gs.dx;
        l = l <= 22 ? 22 : l;
        max = Dimensions.get('screen').width * 0.8 - 22 - 97;
        l = l >= max ? max : l;

        v = (l >= (Dimensions.get('screen').width * 0.8 - 23 - 97)) ? true : false;
        if (v) {
          ToastAndroid.show("验证成功!",ToastAndroid.SHORT);
        }

        this.setState({
          marginLeft:l,
          defaultAnimationModal:!v
        })
      },
      //手势开始
      onPanResponderStart:(evt, gs) => {

      },
      // 手势动作结束回调
      onPanResponderEnd: (evt, gs) => {
        console.log(`onPanResponderEnd call: gs=` ,gs);
        this.setState({
          lastMarginLeft: this.state.marginLeft,
        })
      },
      // 手势释放, 响应者释放回调
      onPanResponderRelease: (evt, gs) => {
        console.log(`onPanResponderRelease call: gs=` ,gs);
      },
       // 当前手势被强制取消的回调
      onPanResponderTerminate: (evt, gs) => {
        console.log(`onPanResponderTerminate call: gs=` ,gs);
      },
      // 其他的东西想成为响应器。这种视图应该释放应答吗？返回 true 就是允许释放 
      onPanResponderTerminationRequest:(evt, gs) => {
        console.log(`onPanResponderTerminationRequest call: gs=` ,gs);
        // 如果返回true,Modal里面的手势不能正常使用
        return false;
      },
      onShouldBlockNativeResponder: (evt, gs) => {
        console.log(`onShouldBlockNativeResponder call: gs=` ,gs);
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        return true;
      },
    })
  }

遇到的问题

• 弹框里面使用手势始终异常
  手势不管是方法调用还是返回的值都不对。后来专门写了一个用于测试手势的页面，页面只有一个View组件，发现手势正常使用，于是把问题放到了Modal上，后来发现是onPanResponderTerminationRequest返回true导致了。onPanResponderTerminationRequest的作用是：子控件是否释放处理手势由父控件处理，这里肯定不需要给父控件，所以应该返回false。
• 工程始终报RN库或者文件找不到
  当使用Vscode写RN代码时，使用自动提示功能生成代码时，工具会导入一些库，而这些库其实是并没有的，所以，当遇到这样的问题，请检查导入的库，是不是都是自己需要的并存在的。
• 修改进入页面路由后，重新导入，页面没有发生改变
  当我们index.js修改了第一个RN页面时，重新导入，发现并没有导入修改后的页面，这时候可以先断开RN调试服务，使用下面命令重新开启服务：

  adb reverse tcp:8081 tcp:8081
  npm start
  

• Android模拟器不能加载RN文件，始终报不能链接到服务端口
  检查Android是否正常联网。正常情况下，是不需要做其它配置的，就可以加载RN文件。