RN项目开发中遇到的一些知识点

1.不要乱加AppRegistry,否则会遇到意想不到的bug。

之前遇到一个bug,不知情况下,import了AppRegistry,导致自定义的导航栏点返回键返回不了。

AppRegistry.registerComponent('ReactDemo', () => ReactDemo); 

代码的意思:定义了一个名为ReactDemo的新组件(Component),并且使用了AppRegistry 的内置模块进行了“注册”操作。在编写React Native 时,会写出很多新的组件。而一个App 的最终界面,其实也是各式各样的组件组合。

AppRegistry 模块则是用来告知React Native 哪一个组件被注册为整个应用的根容器。使用AppRegistry.registerComponent进行组册自己,然后原生系统就可以进行加载bundle 文件包,最后就会调用AppRegistry.runApplication进行运行。当一个视图被摧毁的时候,为了结束应用需要调用AppRegistry.unmountApplicationComponentAtRootTag方法。

2.属性确认和默认

因为React Native 创建的自定义组件可以复用,我们开发的过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件,但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件时申明一些属性。

  static propTypes = {
    itemViewImage: PropTypes.number.isRequired,         //左侧标志图
    itemViewTitle: PropTypes.string.isRequired,         //左侧标题
    instructionTitle: PropTypes.string.isRequired,      //右侧指示标题
    isBlueBackGround: PropTypes.bool,                   //是否是蓝色背景、白色字体
    instructionImage: PropTypes.number.isRequired,      //右侧指示箭头
    reDefineMarginBottom: PropTypes.number,             //Item下边距重新定义
    isShowMoreDetail: PropTypes.bool                    //是否展开
  };

  // 默认属性,当没有传递该属性时使用默认值,同时属性确认不能加isRequired
  static defaultProps = {
    isBlueBackGround: false,
    reDefineMarginBottom: 0,
    isShowMoreDetail: false,
  }

上面声明的属性都是 isRequired, 如果不传递这些属性程序会在开发阶段出现警告,开发阶段需要我们进行属性确认。

当我们使用propTypes.object 或propTypes.array校验属性类型时,我们知道属性类型时一个数组或者对象,而无从得知对象的具体结构和数组元素的类型是什么样子,这时候我们更好的做法是用propTypes.shape和propTypes.arrayOf.

  style:propTypes.shape({

        color:propTypes.string,

        fontSize:propTypes.number

}),

sequence:propTypes.arrayOf(propTypes.number);

解释:表示style属性是一个对象,对象有两个属性,一个是string类型color,另外一个是数字类型的number,sequence表示属性为一个数组并且每一个数组元素都是数字类型。

ps:为了保证React Native 代码高效运行,属性确认只在开发环境中有效。也就是说,正式发布的App运行时是不会进行检查的。

3.修改style属性的时候,可以直接传一个style属性过去,这样可以修改多个,不用定义多个属性。如修改 marginBottom属性,可以直接传一个style 进去。

          <Text
            style={[
              styles.ItemViewTitleStyle,
              { color: this.props.isBlueBackGround ? "white" : "black" },
              { marginBottom: this.props.reDefineMarginBottom }
            ]}
          >
            {this.props.itemViewTitle}
          </Text>

5.H5 页面侧滑和RN 不太一样,这个需要单独处理一下的。后面需要学习一下的。

猜你喜欢

转载自blog.csdn.net/baihailing/article/details/86165668
今日推荐