1??? Props(屬性)和State(狀態)和簡單樣式簡單使用App.js代碼如下

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, NativeModules, DeviceEventEmitter, Image} from 'react-native';const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',android:'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu', }); var myAndroidToast = NativeModules.MyToast; type Props = {};class Greet extends Component {render() {return (<Text>Hello {this.props.name}</Text>);} }class Blink extends Component {constructor(props){super(props);this.state = {isShowing: true};setInterval(() => {this.setState(previousState => {return {isShowing: !previousState.isShowing};});},1000);}render() {let display = this.state.isShowing? this.props.text : 'chenyu';return(<Text>{display}</Text>);} } export default class App extends Component<Props> {componentWillMount(){ //監聽事件名為EventName的事件DeviceEventEmitter.addListener('EventName', function() { alert("Android send js msg "); }); }constructor(props){super(props);this.state={myName:'chenzixuan',num:0,isShowingText:true}// 每1000毫秒對showText狀態做一次取反操作setInterval(() => {this.setState(previousState => {return {num: ++this.state.num};});}, 1000);}render() {let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}; return (<View style={styles.container}><Text onPress={()=> this._androidShowMsg()} style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.red}>To get started, edit App.js</Text><Text style={styles.bigblue}>{instructions}</Text><Text style={styles.instructions}>{this.state.myName}</Text><Text style={styles.instructions}>{this.state.num}</Text><Greet name = 'chenyu'></Greet><Blink text = 'chenzixuan'></Blink></View>);}_androidShowMsg = () => {var value = myAndroidToast.showMyName();this.setState({myName:value});}; }const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},bigblue: {color: 'blue',fontWeight: 'bold',fontSize: 39},red: {color: 'red' }, });

?

?

?

?

2?? 運行結果如下

?

?

總結

以上是生活随笔為你收集整理的React Native之Props(属性)和State(状态)和简单样式简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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