[React-Native教學筆記]<TextInput>文字輸入－Michael_Jheng的部落格

文字輸入在解構指派需增加TextInput,如下程式,

在主程式需增加自定義組件使用props,並設置text變數初始值,接下來撰寫TextInput文字輸入,與Text文字顯示,如下程式,

最後撰寫會用到的style,如下程式,

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示此功能

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

export default class AwesomeProject extends Component {

  /* 設置文字狀態 */
  constructor(props) {
    super(props);//呼叫對應的父類別建構元,props
    this.state = {text: ''};//狀態初始化,text變數為空值
  }

  render() {
    return (
        /*
            <TextInput>:設置style,placeholder背景文字,onChangeText設置文字
            <Text>:this.state.text.split(' ')在<TextInput>輸入文字立即顯示
        */
        <View>
            <TextInput
                style={[styles.black, styles.height80, styles.fontSize30]}
                placeholder="Input Word"
                onChangeText={(text) => this.setState({text})}
            />
            <Text style={[styles.black, styles.fontSize30]}>
                {'user input: ' + this.state.text.split(' ')}
            </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  black: {
    color: 'black',//顏色黑色
  },
  height80: {
    height: 80,//高度80
  },
  fontSize30 :{
    fontSize: 30,//字形大小30
  }
});

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,

未輸入文字,