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

迈不过友情╰ 2022-06-04 06:58 159阅读 0赞

文件位置：App.js

一、导航栏

*  引进react-navigation组件，详细用法见官网：[https://reactnavigation.org][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][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
      },
    ...

*  注意事项

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

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

![这里写图片描述][SouthEast]

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

[https_reactnavigation.org]: https://reactnavigation.org
[https_github.com_leecade_react-native-swiper]: https://github.com/leecade/react-native-swiper
[SouthEast]: /images/20220604/e29b2d7ba5c743e5b6a28e57ba08c37d.png
[React Native_demo]: http://blog.csdn.net/change_on/article/details/78738571