开发一个基于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–视频组件+布局