React-Native初级美食Demo主要使用了flex布局，整体感觉还是很方面，可以很快上手的。如果要获取屏幕宽度可

前言

历时1周的工作之余的时间做的一个初级小Demo，不足之处还请多多指教。采用了React-Native0.57.4版本进行开发的,数据方面是自己写的一些假数据，使用Charles进行抓包代理转发请求到本地数据获取。算是踩了不少的坑-_-在这里简单复盘下把，顺便可以总结下经验，希望可以给刚入坑的同学一些帮助。

`技术栈以及组件库`

Redux：解决组件数据共享问题 //^5.1.0
react-navigation：可扩展且使用简单的导航解决方案 //^2.18.2
react-native-tab-navigator：Tab切换库 //^0.3.4
FlatList：内置组件,可实现下拉刷新，上拉加载
Charles：抓包工具，可以用来代理转发请求
VS Code：微软推出的编辑器，尝试使用后原来的Atom瞬间弃坑...感兴趣的可以自己去体验下
...：其它一些内置组件就不进行细说

`效果预览`

`文件结构`

┣━ mock   // 打包文件
  ┣━ index.json   //首页数据...好像也只有这一个
┣━ resource   // 资源文件
  ┣━ img   //假数据统一存储
    ┣━ ...   //一些资源图片及二倍三倍图存储
┣━ store //redux数据入口
  ┣━ index.js   //入口文件
  ┣━ reducer.js   //reducer入口文件
┣━ View //页面
  ┣━ home   //TabNavigator文件
    ┣━ View.js   //定义TabNavigator
  ┣━ list  //列表文件
    ┣━ actionsCreator.js   //定义action
    ┣━ actionTypes.js   //定义action.type
    ┣━ index.js   //list下redux数据入口文件
    ┣━ reducer.js   
    ┣━ style.js   //list页面样式文件
    ┣━ style.js   //list页面UI
  ┣━ map  //随便引用的webview
    ┣━ ...   //同list目录一样...
  ┣━ wiki  //首页
    ┣━ ...   //同list目录一样...
┣━ App.js   //路由定义
┣━ index.js   //js入口文件
...   //后面略过

`实现主要几个功能`

页面布局

主要使用了flex布局，整体感觉还是很方面，可以很快上手的。如果要获取屏幕宽度可以使用Dimensions.get('window')获取，也可以进行一些宽高计算。

const {width} = Dimensions.get('window');
const itemWidth = (width - 20) / 3;
const itemImgWidth = itemWidth - 20;
<Image
    source={bannerImg}
    style={{width: width}}
/>
<TextInput
    placeholder="请输入搜索内容"
    style={[styles.search,{top: width * .4}]}
    underlineColorAndroid='#fff'
></TextInput>

react-navigation

这里刚开始接触,看了半天文档感觉有点绕绕的，后来参考了下大佬们的使用慢慢才上手。主要定义页面跳转，tab切换，底部导航，导航抽屉等...而且发现有Material风格的底部导航和tab。同时可以自定义页面Header，或者禁用。

<TabNavigator>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'Wiki'}
        title="HotFoods"
        renderIcon={() => <Image source={homeIcon} />}
        onPress={() => this.setState({ selectedTab: 'Wiki' })}
        badgeText="1"
    >
        <Wiki navigate={this.props.navigation.navigate}/>
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'hotlist'}
        title="HotVideo"
        renderIcon={() => <Image source={hotIcon} />}
        onPress={() => this.setState({ selectedTab: 'hotlist' })}
    >
        <List />
    </TabNavigator.Item>
    <TabNavigator.Item
        selected={this.state.selectedTab === 'mymap'}
        title="MapFoods"
        renderIcon={() => <Image source={hotIcon} />}
        onPress={() => this.setState({ selectedTab: 'mymap' })}
    >
        <MyMap />
    </TabNavigator.Item>

</TabNavigator>

上拉加载更多

利用FlatList内置props：

refreshing表明刷新的状态。
onRefresh开发刷新时加载的事件，一般也会在事件中设置refreshing状态。并在回调方法中请求接口数据。

const mapState = (state) => {
    return {
        list: state.list.list,
        refreshing: state.list.refreshing
    }
}

const mapDispatch = (dispatch) => {
    return {
        changeListInfo(res) {
            if(res.ret && res.data) {
                const action = getChangeListAction(res.data.list)
                dispatch(action)
            }
        },
        changeFreshing(){
            const action = getRefreshingAction(true)
            dispatch(action)
        }
    }
}

列表页数据

列表页数据的获取使用的动态路由，通过navigate传参将当前所点击列表的ID传递到列表页。然后在列表页通过ID获取接口数据

<TouchableWithoutFeedback
   key={item.id}
   onPress={() => {this.props.navigate('List',{ id: item.id })}}
>
    <View
        style={{width: itemWidth}}
    >
        <Image
            source={{uri: item.imgUrl}}
            style={[{width: itemImgWidth, height: itemImgWidth},styles.itemImg]}
        />
        <View>
            <Text style={styles.itemTitle}>{item.title}</Text>
        </View>
    </View>
</TouchableWithoutFeedback>

`结语`

由于工作比较忙,所以只做了一些基础的小功能。后面还有很多有待完善，等空余时间多了出来回慢慢进行完善。由于刚接触React,所以做的不太好，不足之处还请指教。

初次接触到React-Native，有很多不足的地方，还请多多指教。如果你觉得代码烂的话也请轻喷，玻璃心，你喷我我就骂你！！！

如果文章对你有帮助，或者对Demo感兴趣的话可以查看我GitHub源码。可以star我的项目给我一点点的鼓励，也希望有志同道和的可以和我一起讨论，我也会第一时间帮你解答。