先推薦一個學習的地址：https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=1277855849978417&vid=s14139cbg2q
我看了一下，挺全的，我接下來應該會根據這個視頻自己做一個App？
這個鏈接也是我在GitHub上面學習各位可愛的程序員的開源項目的時候看到的，接下來我們先來看這個博主的項目吧～
先放github地址：https://github.com/linchengzzz/rnTest
接下來我們來分析項目
項目運行出來的效果，應該是接口有些問題



接下來我們簡單看看代碼，發現亮點

//index.js //這個是根入口文件 /*** @format* @lint-ignore-every XPLATJSCOPYRIGHT1*/import {AppRegistry} from 'react-native'; // import App from './App'; import App from './views/main.js'; import {name as appName} from './app.json';AppRegistry.registerComponent(appName, () => App);

我們接下來看main.js

//views/main.js import React, { Component } from 'react'; import { Icon } from 'react-native-elements'; //引入頁面 import AboutPage from './book/about'; import BookPage from './book/index'; import MoviePage from './movie/index'; import BookDetailsPage from './book/detail'; import MovieDetailsPage from './common/webpage'; import { createStackNavigator, createBottomTabNavigator, createAppContainer } from "react-navigation"; //定義切換頁面 const bottomTabNavigator = createBottomTabNavigator({Book: BookPage,Movie: MoviePage,About: AboutPage}, {defaultNavigationOptions: ({ navigation }) => ({tabBarIcon: ({ focused, tintColor }) => {const { routeName } = navigation.state;let iconName;if (routeName === 'Book') {iconName = focused ? 'book' : 'book' ; //可以根據focused更換圖標} else if (routeName === 'Movie') {iconName = 'movie';}else{iconName = 'stars';}return <Icon name={iconName} size={25} color={tintColor} />;},}),//定義激活顏色，有的是直接改變圖片tabBarOptions: {//根據是否激活，改變顏色activeTintColor: 'tomato', inactiveTintColor: 'gray',}});// 定義對應頁面 const AppStack = createStackNavigator({bottomTabNavigator: {screen: bottomTabNavigator},Details: {screen: BookDetailsPage,// navigationOptions: {// title: "圖書詳情"// }},MovieDetails:{screen: MovieDetailsPage,}}, {initialRouteName: "bottomTabNavigator",// 默認header bar樣式配置defaultNavigationOptions: {headerTintColor: '#fff',headerStyle: {backgroundColor: '#2596f3',height: 0 //影藏header}},}); const AppContainer = createAppContainer(AppStack);export default class App extends Component {render() {return (<AppContainer />);} }

分析對應頁面

//views/book/about.js import React, { Component } from 'react'; import { Text, View, ScrollView, StyleSheet } from 'react-native'; export default class About extends Component {render(){return (<ScrollView><View style={styles.container}><Text style={styles.title}>App Info</Text><View style={styles.box}><Text style={styles.leftTitle}>版本</Text><Text style={styles.rightContent}>v1.1_20190312</Text></View><View style={styles.box}><Text style={styles.leftTitle}>課程地址</Text><Text style={styles.rightContent}>https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=1278010468801073&vid=e1414ek8gbc</Text></View><View style={styles.box}><Text style={styles.leftTitle}>依賴組件</Text><Text style={styles.rightContent}>react-native-elements、react-navigation、react-native-webview</Text></View><View style={styles.box}><Text style={styles.leftTitle}>欠缺功能</Text><Text style={styles.rightContent}>header：目前影藏了，設置了header高度為0</Text></View> </View></ScrollView>)} } var styles = StyleSheet.create({container: {flex: 1,padding: 10,marginTop: 0,lineHeight:30},title: {fontWeight: "bold",color: "#f33",fontSize: 20},box:{marginTop:20,flex:1},leftTitle:{fontSize:18,color:"#333",fontWeight:"800",},rightContent:{fontSize:16,color:"#999"} }) //封裝的searchBar //views/common/searchbar.js import React, { Component } from 'react'; import { Text, View,TextInput, StyleSheet, TouchableOpacity } from 'react-native';export default class SearchBar extends Component {render() {return (<View style={styles.container}><View style={styles.inputContainer}><TextInput style={styles.input} {...this.props} /></View><TouchableOpacity style={styles.btn} {...this.props}><Text style={styles.search}>搜索</Text></TouchableOpacity></View>);} }var styles = StyleSheet.create({container:{flexDirection:"row",justifyContent:"flex-end",alignItems:"center",height:44,marginTop:10},inputContainer:{flex:1,marginLeft:5},input:{flex:1,height:44,borderWidth:1,borderRadius:4,borderColor:"#ccc",paddingLeft:5},btn:{width:55,height:44,marginLeft:5,marginRight:5,backgroundColor:"#23beff",borderRadius:4,justifyContent:"center",alignItems:"center"},search:{flex:1,color:"#fff",fontSize:15,fontWeight:"bold",textAlign:"center",lineHeight:44} }) //views/book/index.js import React, { Component } from 'react'; import { Text, View, ScrollView, Image, StyleSheet,TouchableOpacity } from 'react-native'; import SearchBar from '../common/searchbar'; import Util from '../common/util'; import Api from '../common/api'; export default class index extends Component {constructor(props) {super(props);this.state = {data: [],show: true,keyword: 'react'};}componentDidMount(){// 初次請求數據this.getData();}updateSearch = search => {this.setState({ keyword: search }); }//獲取數據searchText=()=>{this.getData();}// 以下寫法報錯，不識別this// searchText (){// this.getData();// }// Util.loading 工具函數定義的loadinggetData(){// 顯示loadingthis.setState({show: false});// 請求數據var that = this;var url = Api.book_search + '?count=20&q=' + this.state.keyword;Util.getRequest(url, function (response) {// 請求成功if (!response.books || response.books.length == 0) {return alert("未查詢到數據");}// 顯示loading,將請求結果賦值給datathat.setState({show: true,data: response.books});}, function (error) {// 請求失敗alert(error);});}render() {return (<ScrollView>{/* 封裝的搜索頭部 */}<SearchBarplaceholder="請輸入關鍵詞（書名、作者）..."onChangeText={this.updateSearch}onPress={this.searchText}/>{// 請求數據時顯示loading，請求成功顯示列表this.state.show ?<View style={styles.container} >{this.state.data.map((item, i) => {return (<TouchableOpacity style={styles.list} key={i} onPress={() => this.props.navigation.push('Details', { 'bookID': item.id })}activeOpacity={0.5}><Image source={{ uri: item.images.small }} style={styles.images} /><View style={styles.rightbox}><Text style={styles.title}>{item.title}</Text><Text>價格：{item.price ? item.price : '暫無'}</Text><Text>作者：{item.author.map(function(vo){return vo + ' ';})}</Text><Text>{item.publisher} {item.pubdate}</Text><Text>{item.pages ? item.pages : '未知'} 頁</Text></View></TouchableOpacity>);})}</View> : Util.loading}</ScrollView>)} }var styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',justifyContent: "center",padding:10,marginTop: 0},btn:{width:100,height:30},images: { width: 80, height: 100 },title:{fontWeight:"bold",color:"#f33"},rightbox:{flex:1,marginLeft:10},list:{flex: 1,flexDirection: "row",borderBottomColor: "#ccc",borderBottomWidth: 1,paddingTop:10,paddingBottom:10} })

關于詳情頁

//views/book/detail.js import React, { Component } from 'react'; import { Text, View, ScrollView, Image, StyleSheet } from 'react-native'; import { Icon,Header,Button } from 'react-native-elements'; import Util from '../common/util'; import Api from '../common/api'; import { TouchableHighlight, TouchableOpacity } from 'react-native-gesture-handler'; export default class BookDetail extends Component {constructor(props) {super(props);this.state = {bookID: '',bookData: null};}componentDidMount(){// bookID = this.props.navigation.getParam('bookID', 26378583);// this.setState({// bookID: bookID// })this.getData();}getData(){//這個是從后端獲取的數據// var url = Api.book_detail_id + this.state.bookID;var url = Api.book_detail_id + this.props.navigation.getParam('bookID', 26378583);var that = this;Util.getRequest(url,function(data){that.setState({bookData: data})},function(error){alert(error);})}render(){var bookData = this.state.bookData;return (<ScrollView>{bookData != null ?<View>{/* <Buttonicon={{name: "assignment-return",size: 15,color: "white"}}onPress={() => this.props.navigation.goBack()}title="返回"/> */}<View style={styles.list}><Image source={{ uri: bookData.images.small }} style={styles.images} /><View style={styles.rightbox}><Text style={styles.title}>{bookData.title}</Text><Text>價格：{bookData.price ? bookData.price : '暫無'}</Text><Text>作者：{bookData.author.map(function (vo) {return vo + ' ';})}</Text><Text>{bookData.publisher} {bookData.pubdate}</Text><Text>{bookData.pages ? bookData.pages : '未知'} 頁</Text></View></View><View style={{ marginTop: 10 }}><Text>圖書簡介</Text><Text>{bookData.summary}</Text></View><View style={{marginTop:10}}><Text>作者簡介</Text><Text>{bookData.author_intro}</Text></View></View>: Util.loading}</ScrollView>)}} var styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',justifyContent: "center",padding: 10,marginTop: 0},btn: {width: 100,height: 30},images: { width: 80, height: 100 },title: {fontWeight: "bold",color: "#f33"},rightbox: {flex: 1,marginLeft: 10},list: {flex: 1,flexDirection: "row",borderBottomColor: "#ccc",borderBottomWidth: 1,paddingTop: 10,paddingBottom: 10} })

轉載于:https://www.cnblogs.com/smart-girl/p/10917986.html

總結

以上是生活随笔為你收集整理的【水滴石穿】react-native-book的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。