第一个RN 小Demo 记录一下

import React, { Component } from 'react'
import { 
  AppRegistry, StyleSheet, Text, View, Dimensions, TextInput, Button
} from 'react-native'

let margenWidth = Dimensions.get('window').width * 0.05;

export default class RNLogIn extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputeNum:'',
      inputedPW:'',
    }
    this.updatePW = this.updatePW.bind(this);
  }

  updateNum(newText) {
    this.setState((state) => {
      return {
        inputeNum: newText
      }
    })
  }

  updatePW(newText) {
    this.setState(() => {
      return {
        inputedPW: newText
      }
    })
  }

  render() {
    return (
      <View style = {styles.ViewStyle}>
        {/* //console.log('123') */}
        <TextInput style={styles.TextInputStyle} placeholder={'请输入手机号'} onChangeText={(newText)=>this.updateNum(newText)}/>
        <Text style={styles.TextStyle}>您输入的手机号: {this.state.inputeNum}</Text>
        <TextInput style={styles.TextInputStyle} placeholder={'请输入密码'} password={true} onChangeText={this.updatePW}/>
        <Text style={styles.TextStyle}>确定</Text>
      </View>
    )
  }
}

let styles = StyleSheet.create({
  ViewStyle: {
    backgroundColor: 'white',
    top: 60,
    flex: 1
  },
  TextInputStyle: {
    backgroundColor: 'gray',
    margin: margenWidth,
    fontSize: 20
  },
  TextStyle: {
    backgroundColor: 'white',
    margin: margenWidth,
    fontSize: 20
  },
  ButtonStyle: {
    margin: margenWidth,
    fontSize: 60,
    color: 'gray'
  }
}) 

AppRegistry.registerComponent('RNLogIn', () => RNLogIn);

屏幕快照 2019-04-29 上午11.14.05.png