最近使用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属性可以改变这个文本的样式。

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐