react native ScrollView之Swiper使用
阿新 • • 發佈:2021-01-10
- 安裝 Swiper ,在WebStorm的Terminal中執行命令
yarn add react-native-swiper@nighty
- 安裝成功後在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" },
- 建立自定義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
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;