RN开发APP

最近使用RN做开发了一个APP

在开发中肯定离不开路由；

RN中关于路由的配置：安装依赖react-navigation-stack；
创建路由import { createStackNavigator } from ‘react-navigation-stack’;
路由的跳转则要通过：this.props.navigation.navigate(‘路径’，‘数据’)
路由数据的接收通过this.props.navigation.state.params；
路由的使用详情可参考：
https://blog.csdn.net/Jump_Monkey/article/details/103991767

RN官网中的api；

到的比较多的就是FlatList，Image，还有用到一个测导航，也可以说是一个抽屉react-navigation-drawer这个比RN官网中的DrawerLayoutAndroid兼容性要好，前者可以兼容苹果和安卓，但是后者只能适用于安卓的;
FlatList中有一个data是来接受数据的，这个数据只能是数组的形式；
renderItem来接收这个展示的内容；
keyExtractor给FlatList添加key值，listkey也是为了给FlatList添加key值；
ListEmptyComponent和renderItem的用法一样，但是ListEmptyComponent是在data的数据为空的情况下才会出现；numColumns可以以列的行是设置内容的布局方式。

image中有一个source和uri，一般在本地的图片下需要用到source，但是其中的require的值不能为空，所以image如果是变量的话可以先定义好require（‘图片路径’），这样只用给source=‘变量’，这样就可以实现本地图片的动态展示了。uri是加载网络图片的，项目开发中一般很少用到。

app头部文字的实现

static navigationOptions = ({ navigation }) => ({
title: navigation.state.params.tumour,
});
当然这个title后边的可以是一个固定的字符串，也可以是一个动态的数据，如果需要头部标题动态展示，那么就像上述代码一样就可以了，那个navigation.state.params.tumour是通过路由传递的参数。

触发点击事件修改样式

以点击事件为例子，点击文本之后通过一个flag来进行判断文本应该显示什么样式，在<Text ref={(ref) => this.itemRefsFont.push(ref)}>,通过ref先将文本添加到数组itemFRefsFont这个数组中，通过setNativeProps属性可以改变这个文本的样式。