开发一个基于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')

...


            1}>Aussie tourist dies at Bali hotel}>
                'cover' style={styles.imageSwiper} source={require('./img/1.jpg')} />
              
              1}>Big lie behind Nine’s new show}>
                'cover' style={styles.imageSwiper} source={require('./img/2.jpg')} />
              
              1}>Why Stone split from Garfield}>
                'cover' style={styles.imageSwiper} source={require('./img/3.jpg')} />
              
              1}>Learn from Kim K to land that job}>
                'cover' style={styles.imageSwiper} source={require('./img/4.jpg')} />
              
            
...

const styles = StyleSheet.create({

...
  wrapper: {
  },

  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },

  imageSwiper: {
    width:width,
    height:150
  },
...

• 注意事项

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

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

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