本文主要包括以下內容

View組件的實例

Text組件實例

Navigator組件實例

TextInput組件實例

View組件的實例

效果如下

代碼如下

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,PixelRatio,View } from 'react-native';class Abc extends Component {render() {return (<View style={styles.flex}><View style={styles.container}><View style={[styles.item,styles.center]}><Text style={styles.font}>酒店</Text></View><View style={[styles.item,styles.lineLeftRight]}><View style={[styles.center,styles.flex,styles.lineCenter]}><Text style={styles.font}>海外酒店</Text></View><View style={[styles.center,styles.flex]}><Text style={styles.font}>特惠酒店</Text></View></View><View style={styles.item}><View style={[styles.center,styles.flex,styles.lineCenter]}><Text style={styles.font}>團購</Text></View><View style={[styles.center,styles.flex]}><Text style={styles.font}>客棧，公寓</Text></View></View></View></View>);} }const styles = StyleSheet.create({container: {marginTop:200,marginLeft:5,marginRight:5,height:84,flexDirection:'row',borderRadius:5,padding:2,backgroundColor:'#FF0067',},item: {flex: 1,height:80,},center:{justifyContent:'center',alignItems:'center',},flex:{flex:1,},font:{color:'#fff',fontSize:16,fontWeight:'bold',},lineLeftRight:{borderLeftWidth:1/PixelRatio.get(),borderRightWidth:1/PixelRatio.get(),borderColor:'#fff',},lineCenter:{borderBottomWidth:1/PixelRatio.get(),borderColor:'#fff',}, });AppRegistry.registerComponent('Abc', () => Abc);

Text組件實例

head.js

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,PixelRatio,View } from 'react-native';class Header extends Component {render() {return (<View style={styles.flex}><Text style={styles.font}><Text style={styles.font_1}>網易</Text><Text style={styles.font_2}>新聞</Text><Text>有態度"</Text></Text></View>);} }const styles = StyleSheet.create({flex:{marginTop:25,height:50,borderBottomWidth:3/PixelRatio.get(),borderBottomColor:'#EF2D36',alignItems:'center',},font:{fontSize:25,fontWeight:'bold',textAlign:'center',},font_1:{color:'#CD1D1C',},font_2:{color:'#FFF',backgroundColor:'#CD1D1C',}, });module.exports=Header;

將head.js導入到主JS中的代碼為const Header=require(‘./head’);

主JS詳細代碼

實現了列表，并且有點擊效果

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,PixelRatio,View } from 'react-native';const Header=require('./head');class Abc extends Component {render() {return (<View style={styles.flex}><Header></Header><List title='一線城市樓市退燒 有房源一夜跌價160萬'></List><List title='上海市民稱墓地太貴買不起 買房存骨灰'></List><List title='朝鮮再發視頻:摧毀青瓦臺 一切化作灰燼'></List><List title='生活大爆炸人物原型都好牛逼'></List><ImportantNewsnews={['解放軍報報社大樓正在拆除 標識已被卸下(圖)','韓國停簽東三省52家旅行社 或為阻止朝旅游創匯','南京大學生發起親吻陌生人活動 有女生獻初吻-南京大學生發起親吻陌生人活動 有女生獻初吻-南京大學生發起親吻陌生人活動 有女生獻初吻','防總部署長江防汛:以防御98年量級大洪水為目標']}></ImportantNews></View>);} }class List extends Component{render(){return (<View style={styles.list_item}><Text style={styles.list_item_font}>{this.props.title}</Text></View>);} }class ImportantNews extends Component{show(title){alert(title);}render(){var news=[];for(var i in this.props.news){var text=(<TextonPress={this.show.bind(this,this.props.news[i])}numberOfLines={2}style={styles.news_item}key={i}>{this.props.news[i]}</Text>);news.push(text);}return (<View style={styles.flex}><Text style={styles.news_title}>今日要聞</Text>{news}</View>);} }const styles = StyleSheet.create({flex:{flex:1,},list_item:{height:40,marginLeft:10,marginRight:10,borderBottomWidth:1,borderBottomColor:'#ddd',justifyContent:'center',},list_item_font:{fontSize:16,},news_item:{marginLeft:10,marginRight:10,fontSize:15,lineHeight:40,},news_title:{fontSize:20,fontWeight:'bold',color:'#CD1D1C',marginLeft:10,marginTop:15,}, });AppRegistry.registerComponent('Abc', () => Abc);

效果如下

Navigator組件實例

實現了頁面跳轉和通過Navigator傳遞數據并回傳數據，在componentDidMount中獲取傳遞過來的數據

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Navigator,ScrollView,Text,PixelRatio,View } from 'react-native';const Header=require('./head');class Abc extends Component {render() {let defaultName='List';let defaultComponent=List;return (<NavigatorinitialRoute={{ name: defaultName, component: defaultComponent }}//配置場景configureScene={(route) => {//這個是頁面之間跳轉時候的動畫，具體有哪些？可以看這個目錄下，有源代碼的: node_modules/react-//native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.jsreturn Navigator.SceneConfigs.VerticalDownSwipeJump;}}renderScene={(route, navigator) =>{let Component = route.component;return <Component {...route.params} navigator={navigator} />}} />); } }class List extends Component {constructor(props) {super(props);this.state = {id:1,user:null,};}_pressButton() {const { navigator } = this.props;//為什么這里可以取得 props.navigator?請看上文://<Component {...route.params} navigator={navigator} />//這里傳遞了navigator作為propsconst self=this;if(navigator) {navigator.push({name: 'Detail',component: Detail,params:{id:this.state.id,//從詳情頁獲取usergetUser: function(user) {self.setState({user: user})}}})}}render(){if(this.state.user){return(<View><Text style={styles.list_item}>用戶信息: { JSON.stringify(this.state.user) }</Text></View>);}else{return (<ScrollView style={styles.flex}><Text style={styles.list_item} onPress={this._pressButton.bind(this)} >☆ 豪華郵輪濟州島3日游</Text><Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪華郵輪臺灣3日游</Text><Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪華郵輪地中海8日游</Text></ScrollView>);}}}const USER_MODELS = {1: { name: 'mot', age: 23 },2: { name: '晴明大大', age: 25 } };class Detail extends Component{constructor(props) {super(props);this.state = {id:null};}componentDidMount() {//這里獲取從FirstPageComponent傳遞過來的參數: idthis.setState({id: this.props.id});}_pressButton() {const { navigator } = this.props;if(this.props.getUser) {let user = USER_MODELS[this.props.id];this.props.getUser(user);}if(navigator) {//很熟悉吧，入棧出棧~ 把當前的頁面pop掉，這里就返回到了上一個頁面:List了navigator.pop();}}render(){return(<ScrollView><Text style={styles.list_item} >傳遞過來的用戶id是：{this.state.id}</Text><Text style={styles.list_item} onPress={this._pressButton.bind(this)} >點擊我可以跳回去</Text></ScrollView>);} }const styles = StyleSheet.create({flex:{flex:1,},list_item:{height:40,marginLeft:10,marginRight:10,fontSize:20,borderBottomWidth:1,borderBottomColor:'#ddd',justifyContent:'center',}, });AppRegistry.registerComponent('Abc', () => Abc);

效果如下

TextInput組件實例

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Navigator,ScrollView,TextInput,Text,PixelRatio,View } from 'react-native';class Abc extends Component {render() {return (<View style={[styles.flex,styles.topStatus]}><Search></Search></View>);} }class Search extends Component {render(){return(<View style={[styles.flex,styles.flexDirection]}><View style={[styles.flex,styles.input]}><TextInput returnKeyType="search" /></View><View style={styles.btn}><Text style={styles.search}>搜索</Text></View></View>);} }const styles = StyleSheet.create({flex:{flex:1,},flexDirection:{flexDirection:'row',},topStatus:{marginTop:25,},input:{height:45,borderColor:'red',borderWidth:1,marginLeft:10,paddingLeft:10,borderRadius:5,},btn:{width:45,marginLeft:-5,marginRight:5,backgroundColor:'#23BEFF',height:45,justifyContent:'center',alignItems:'center',},search:{color:'#fff',fontSize:15,fontWeight:'bold',}, });AppRegistry.registerComponent('Abc', () => Abc);

效果如下

總結

以上是生活随笔為你收集整理的React Native实例的全部內容，希望文章能夠幫你解決所遇到的問題。

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