反應原生視圖

你好，我是新的反應原生，我有問題的看法。我在輸入文字時遇到問題，因爲它只顯示很小。當我在樣式表中刪除容器時，所有文本消失並且文本輸入變大。反應原生視圖

這裏是我的代碼

render() { 

    return (  
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     <Text style={styles.instructions}> 
      To get started, edit index.android.js 
     </Text> 

     <Text style={styles.instructions}> 
      Double tap R on your keyboard to reload,{'\n'} 
      Shake or press menu button for dev menu 
     </Text> 


<View> 
     <View style ={styles.textinput}> 
     <TextInput 
        keyboardType='ascii-capable' 
        placeholder='First Name' 
        value={this.state.firstName} 
        onChangeText={(text) => {this.setState({firstName: text})}}/> 

        <TextInput 
        keyboardType='ascii-capable' 
        placeholder='Middle Name' 
        value={this.state.middleName} 
        onChangeText={(text) => {this.setState({middleName: text})}}/> 

        <TextInput 
        keyboardType='ascii-capable' 
        placeholder='Last Name' 
        value={this.state.lastName} 
        onChangeText={(text) => {this.setState({lastName: text})}}/> 

        <TextInput 
        keyboardType='ascii-capable' 
        placeholder='Email' 
        value={this.state.email} 
        onChangeText={(text) => {this.setState({email: text})}}/> 

        <TextInput 
        keyboardType='ascii-capable' 
        placeholder='Address' 
        value={this.state.address} 
        onChangeText={(text) => {this.setState({address: text})}}/> 
        </View> 

        <View style={styles.buttonModal}> 

         <Button 
        style={styles.cancelButton} 
        onPress={this.editUser} 
        title="SAVE" 
        color="#343434" 
        accessibilityLabel="Save user."/> 


      </View> 
      </View> 

    </View> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 

    textinput: { 
    flex: 0, 
    }, 
    buttonModal: { 
     paddingTop: 20, 
     flexDirection: 'row', 
     justifyContent: 'space-around' 
    }, 
});

來源

2017-06-30 kurokocrunch

它不清楚你想要的這裏，但我相信你想有一個更大的TextInput，在樣式表的TextInput可以嘗試 { 柔性：1， alignSelf： '拉伸' } –

'的TextInput：{柔性： 1}'可能爲你工作 –

沒有工作先生。 – kurokocrunch

以上<View style ={styles.textinput}>的按鈕刪除<view>，使

textinput: { 
    flex: 1, 
    }

，由一個評論flexDirection: 'row',justifyContent: 'space-around'一個嘗試。

來源

2017-06-30 08:58:36

反應原生視圖

回答

相關問題