文件位置：App.js
一、导航栏
- 引进react-navigation组件，详细用法见官网：https://reactnavigation.org
yarn add --save react-navigation
react-native run-android
- 编码
1.在文件开头引进react-navigation
import { TabNavigator } from "react-navigation";
2.页面有4个tab，分别是：精选: JingxuanScreen、最新: ShipinScreen 、关注: RecentChatsScreen 、排行榜: AllContactsScreen 。而react-navigation的使用根简单，只需要把各个界面包含进来即可：
export const MainScreenNavigator = TabNavigator({
精选: { screen: JingxuanScreen },最新: { screen: ShipinScreen },关注: { screen: RecentChatsScreen },排行榜: { screen: AllContactsScreen },});
就是这么简单！！！
二、轮播图，这里使用react-native-swiper
，详见官网：https://github.com/leecade/react-native-swiper
- 引进react-native-swiper
yarn add --save react-native-swiper
react-native run-android
- 编码
1.引进react-native-swiper
import Swiper from 'react-native-swiper';
2.代码,Swiper中的horizontal为true表示滚动视图的子节点是水平排列，false表示竖直排列，autoplay是自动播放的意思
...
const { width } = Dimensions.get('window')
...
<Swiper style={styles.wrapper} horizontal={true} autoplay={true}>
<View style={styles.slide1} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
<Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/1.jpg')} />
</View>
<View style={styles.slide1} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
<Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/2.jpg')} />
</View>
<View style={styles.slide1} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
<Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/3.jpg')} />
</View>
<View style={styles.slide1} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
<Image resizeMode='cover' style={styles.imageSwiper} source={require('./img/4.jpg')} />
</View>
</Swiper>
...
const styles = StyleSheet.create({
...
wrapper: {
},slide: {
flex: 1,justifyContent: 'center',backgroundColor: 'transparent'
},imageSwiper: {
width:width,height:150
},...
- 注意事项
如果出现了轮播图出不来的情况，看看代码里面是不是有标签，两者一起用有问题，解决方法在下一篇的布局当中讲解。
如果一切顺利，那么导航栏和轮播图就出来了：
