开发一个基于React Native的简易demo--导航栏+轮播图

文件位置：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
},
...

注意事项

如果出现了轮播图出不来的情况，看看代码里面是不是有标签，两者一起用有问题，解决方法在下一篇的布局当中讲解。

如果一切顺利，那么导航栏和轮播图就出来了：

下一篇：开发一个基于React Native的简易demo–视频组件+布局