ReactNative学习第三天 UI篇 React-native-Swiper

第三天了,今天学习下UI里基础的一个控件:React-native-Swiper。这里要用到一个第三方库: react-native-swiper。下面我们来写一个例子

 

 一、环境搭建

 这里就不介绍了,ReactNative中文网上有。

 

 二、创建项目

 react-native init SwiperProject --version 0.44.3

 npm install

 react-native run-ios

 

 三、下载 react-native-swiper

 cd 到项目跟目录 执行 npm install react-native-swiper --save

 

 四、修改 index.ios.js

 import React, { Component } from 'react';

 import {

     AppRegistry,

     StyleSheet,

     Text,

     View

 } from 'react-native';

 import Swiper from 'react-native-swiper';

 

 export default class SwiperProject extends Component {

     render() {

         return (

             <Swiper style={styles.wrapper} showsButtons={true}>

                 <View style={styles.slide1}>

                     <Text style={styles.text}>第一页</Text>

                 </View>

                 <View style={styles.slide2}>

                     <Text style={styles.text}>第二页</Text>

                 </View>

                 <View style={styles.slide3}>

                     <Text style={styles.text}>第三页</Text>

                 </View>

             </Swiper>

         );

     }

 }

 

 const styles = StyleSheet.create({

     wrapper: {

     },

     slide1: {

         flex: 1,

         justifyContent: 'center',

         alignItems: 'center',

         backgroundColor: '#9DD6EB',

     },

     slide2: {

         flex: 1,

         justifyContent: 'center',

         alignItems: 'center',

         backgroundColor: '#97CAE5',

     },

     slide3: {

         flex: 1,

         justifyContent: 'center',

         alignItems: 'center',

         backgroundColor: '#92BBD9',

     },

     text: {

         color: '#fff',

         fontSize: 30,

         fontWeight: 'bold',

     }

 });

 

 AppRegistry.registerComponent('SwiperProject', () => SwiperProject);

五、用Xcode打开iOS工程,运行