React Native之Props(屬性)和State(狀態(tài))和簡單樣式簡單使用

1    Props(屬性)和State(狀態(tài))和簡單樣式簡單使用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(){  
          //監(jiān)聽事件名為EventName的事件
          DeviceEventEmitter.addListener('EventName', function() {  
              alert("Android send js msg ");  
          });                                
        }
        
        constructor(props){
            super(props);
            this.state={
                myName:'chenzixuan',
            num:0,
                isShowingText:true
            }
     
               // 每1000毫秒對(duì)showText狀態(tài)做一次取反操作
            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   運(yùn)行結(jié)果如下

 
 

 



 










作者：chen.yu
深信服三年半工作經(jīng)驗(yàn)，目前就職游戲廠商，希望能和大家交流和學(xué)習(xí),
微信公眾號(hào)：編程入門到禿頭 或掃描下面二維碼
零基礎(chǔ)入門進(jìn)階人工智能(鏈接)