react native ScrollView之Swiper使用

  1. 安装 Swiper ，在WebStorm的Terminal中运行命令

    yarn add react-native-swiper@nighty

  2. 安装成功后在package.json中可以查看到 react-native-swiper的安装信息

    "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-swiper": "^1.6.0",
    "react-native-tab-navigator": "^0.3.4",
    "react-native-vector-icons": "^7.1.0"
  },

  3. 创建自定义CKSwiper.js 组件类

     1 import React,{ Component} from 'react';
 2 import {
 3     AppRegistry,
 4     StyleSheet,
 5     Text,
 6     View
 7 } from "react-native";
 8 
 9 import Swiper from 'react-native-swiper';
10 
11 
12 export default class CKSwiper extends Component{
13     render(){
14         return(
15             <Swiper style={styles.wrapper} showsButtons={true}>
    16                 <View style={styles.slide1}>
17                     <Text style={styles.text}>创客未来</Text>
18                 </View>
19                 <View style={styles.slide2}>
20                     <Text style={styles.text}>Beautiful</Text>
21                 </View>
22                 <View style={styles.slide3}>
23                     <Text style={styles.text}>And simple</Text>
24                 </View>
25             </Swiper>
26         )
27     }
28 }
29 const styles=StyleSheet.create({
30     wrapper:{},
31     slide1:{
32         flex:1,
33         justifyContent:'center',
34         alignItems:'center',
35         backgroundColor:'#9DD6EB'
36     },
37     slide2:{
38         flex:1,
39         justifyContent:'center',
40         alignItems:'center',
41         backgroundColor:'#97CAE5'
42     },
43     slide3:{
44         flex:1,
45         justifyContent:'center',
46         alignItems:'center',
47         backgroundColor:'#92BBD5'
48     },
49     text:{
50         color:'#fff',
51         fontSize:30,
52         fontWeight: 'bold'
53     }
54 })

    4.App.js引用自定义Swiper组件

     1 /**
 2  * Sample React Native App
 3  * https://github.com/facebook/react-native
 4  *
 5  * @format
 6  * @flow strict-local
 7  */
 8 
 9 import React from 'react';
10 import {
11   SafeAreaView,
12   StyleSheet,
13   ScrollView,
14   View,
15   Text,
16   StatusBar,
17 } from 'react-native';
18 
19 import {
20   Header,
21   LearnMoreLinks,
22   Colors,
23   DebugInstructions,
24   ReloadInstructions,
25 } from 'react-native/Libraries/NewAppScreen';
26 
27 import CKSwiper from './components/CKSwiper';
28 
29 const App: () => React$Node = () => {
30 
31   return (
32     <>
33       <StatusBar barStyle="dark-content" />
34       <SafeAreaView style={styles.mainViewStyle}>
35 
36       <CKSwiper/>
37       </SafeAreaView>
38     </>
39   );
40 };
41 
42 const styles=StyleSheet.create({
43   mainViewStyle:{
44       flex:1,
45       backgroundColor:'#fff',
46   }
47 });
48 
49 export default App;

     

      

posted @ 2021-01-10 18:23  创客未来  阅读(311)  评论(0)  编辑  收藏  举报