1. 程式人生 > 實用技巧 >react native ScrollView之Swiper使用

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} showsButton={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;