反应原生视图

你好，我是新的反应原生，我有问题的看法。我在输入文字时遇到问题，因为它只显示很小。当我在样式表中删除容器时，所有文本消失并且文本输入变大。反应原生视图

这里是我的代码

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

反应原生视图

回答

相关问题