爲什麼<TextInput/>不顯示正在輸入的內容？

Question

每當我在我的物理設備上的第一個<TextInput/>框中單擊Email時，我看不到正在鍵入的內容。只有當我按Next轉到Password框時，我才能看到Email框中輸入的內容。這是爲什麼？

這裏的App.js：

import React, {Component} from 'react'; 
import {View, StyleSheet} from 'react-native'; 
import BackGround from './components/BackGround'; 

export default class App extends Component { 
    render() { 
     return(
      <View style={styles.back}> 
       <BackGround/> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    back: { 
     flex: 1 
    } 
}); 

這裏的Login.js：

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

class Login extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      text: '' 
     }; 
    } 

    updateTextInput = text => this.setState({text}); 

    render() { 
     return(
      <KeyboardAvoidingView behavior={"padding"} style={styles.container}> 
       <View> 
        <TextInput 
         style={styles.input} 
         returnKeyType={"next"} 
         keyboardType={"email-address"} 
         autoCorrect={false} 
         onChangeText={this.updateTextInput} 
         value={this.state.text} 
        /> 

        <TextInput 
         style={styles.input} 
         returnKeyType={"go"} 
         secureTextEntry 
        /> 

        <TouchableOpacity> 
         <Text style={styles.loginAndCA}>Login</Text> 
        </TouchableOpacity> 

        <TouchableOpacity> 
         <Text style={styles.loginAndCA}>Create Account</Text> 
        </TouchableOpacity> 
       </View> 
      </KeyboardAvoidingView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     padding: 20 
    }, 

    input: { 
     backgroundColor: '#DAE5FF', 
     paddingBottom: 20, 
     padding: 20, 
     paddingHorizontal: 15, 
     marginBottom: 10, 
     borderRadius: 15, 
    }, 

    loginAndCA: { 
     fontSize: 40, 
     textAlign: 'center', 
     color: 'white', 
     fontFamily: 'Bodoni 72 Smallcaps', 
     paddingHorizontal: 10 
    }, 

    buttons: { 
     paddingBottom: 50 
    } 
}); 

export default Login; 

這裏的BackGround.js：

import React, {Component} from 'react'; 
import {StyleSheet, Image, View} from 'react-native'; 
import Login from './Login'; 

export default class BackGround extends Component { 
    render() { 
     return(
      <View style={styles.first}> 
       <Image style={styles.container} source={require('../pictures/smoke.jpg')}> 
        <View style={styles.second}> 
         <Login/> 
        </View> 
       </Image> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     width: null, 
     height: null, 
     backgroundColor: 'rgba(0,0,0,0)', 
     resizeMode: 'cover' 
    }, 

    first: { 
     flex: 1 
    }, 

    second: { 
     paddingTop: 290 // Moves both <TextInput> boxes down. 
    } 
}); 

Answer 1

你需要給它連接狀態，並作爲的TextInput的值改變，您更新狀態值：

export default class TextInputExample extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     text: '' 
    }; 
    } 
    updateTextInput = text => this.setState({ text }) 

    render() { 
    return (
     <View style={{ flex: 1}}> 
     <TextInput 
      style={{height: 40}} 
      placeholder="Type here!" 
      onChangeText={this.updateTextInput} 
      value={this.state.text} 
     /> 
     </View> 
    ); 
    } 
} 

Answer 2

您需要通過value和onTextChange道具TextInput。

https://facebook.github.io/react-native/docs/textinput.html