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 不太一样,这个需要单独处理一下的。后面需要学习一下的。