马上要跨年了，把最近学的react-native总结一下

最新推荐文章于 2024-11-08 13:58:32 发布

li530893850

最新推荐文章于 2024-11-08 13:58:32 发布

阅读量564

点赞数 1

分类专栏： react-native 文章标签： android react-nati

本文链接：https://blog.csdn.net/li530893850/article/details/53924163

版权

react-native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

概念性的东西就不多说了。
先展示一下最近业余时间的成果。。由于太穷，没有mac笔记本。只能用windows开发，所以开发出来的东西只能用于android 最大的一个原因就是我本来就是做安卓的。哈哈哈
这个项目起初只是为了练习所以没有涉及太多的领域。想到哪里写哪里。
项目刚打开进入登录页面点击登录进入首页
1.登录页面值得一说的是如何给整个页面设置背景图，放到安卓的思想就是给整个layout设置个backGround就完事了 perfect .. 可是RN的view并没有这个属性。所以只能想办法了
现在的处理方式就是在view层上加一个image 并设置占用全屏。
/’设置flex:1，width height 都为NULL 不设0 设置为Null 会自适应屏幕，若不然图片会拉伸变形 /’
2.进入首页会看到底部导航分了三部分。底部民航栏是使用开源框架react-native-tab-navigator来实现
3.首页民航栏部分使用toolbarAndroid 广告轮播图使用react-native-viewpager。使用这个开源框架有一个问题就是在轮播图跳转到最后一张图片时再回到第一张会闪屏一下。一直也没有时间去找解决这个问题的方法。所以就这样放着了。可以试着用另外一个开源框架react-native-swiper 这个口碑比较好点。
4.新闻页面展示了分类后的新闻。有社会、国内、国际……
上面的Tab选项栏使用react-native-scrollable-tab-view如果分类一多的话在划动时感觉在安卓上卡卡的也不知道IOS如何。列表展示使用官方的refreshControl+ListView 官方的refreshControl也有个问题
在下拉的时候得慢慢拉要不然会卡住不动。看视频展示能看出来。
在划动的时候动态设置一个索引的属性。然后在网络请求前拿到对应的类型去请求网络

                <NewsListView tabLabel='社会' navigator={this.props} index={0}></NewsListView>
                <NewsListView tabLabel='国内' navigator={this.props} index={1}></NewsListView>
                <NewsListView tabLabel='国际' navigator={this.props} index={2}></NewsListView>
                <NewsListView tabLabel='娱乐' navigator={this.props} index={3}></NewsListView>
                <NewsListView tabLabel='体育' navigator={this.props} index={4}></NewsListView>
                <NewsListView tabLabel='军事' navigator={this.props} index={5}></NewsListView>
                <NewsListView tabLabel='科技' navigator={this.props} index={6}></NewsListView>
                <NewsListView tabLabel='财经' navigator={this.props} index={7}></NewsListView>
                <NewsListView tabLabel='时尚' navigator={this.props} index={8}></NewsListView>

-5.个人中心页面的头像选择使用开源框架react-native-image-picker因为这个是调用原生相机图库所以在引入项目后要记得重新run 一遍要不然会报找不到类错误。
下面的列表使用ListView 动态设置分割条使用实现方式如下：
首先组织要展示列表数据的json下面这组json数据就是展示了图片资源和文字。后面的rowId用来判断在哪里分割

var imageSource = {
    'data': [{ 'image': 'HelloReact/image/avatar.png', 'text': '设置', rowId: 1 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '我的钱包', rowId: 2 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '我的红包', rowId: 3 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '金币商城', rowId: 4 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '游戏特权', rowId: 5 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '每日签到', rowId: 6 },
    { 'image': 'HelloReact/image/avatar.png', 'text': '应用收藏', rowId: 7 },
    ]
};

下面的处理方式和Listview的就差不多了
在构造方法中得到源数据

 constructor(props) {
        super(props);
        var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows(imageSource.data),//获取data属性的数据
            avatarUrl: require('HelloReact/image/avatar.png'),//默认头像
            divider: false,
        }
    }

然后在renderRow的时候根据三目运算符动态的设置style

<View style={{ width: diviceWidth, height: 1, backgroundColor: '#e0e0e0',     alignItems: 'flex-end' }}></View>
<View ref='text' style={(rowData.rowId == 2 || rowData.rowId == 5) ? styles.showDivider : styles.hiddenDivider}></View>

  showDivider: {
        width: diviceWidth,
        height: 16,
        backgroundColor:'#e0e0e0'
    },
    hiddenDivider: {
        width: 0,
        height: 0
    },
//还记得上面json数据中的rowId 这块就是根据这个rowId来判断要在哪行下面展示分割条