react-native - 在本机反应中使用 Flexbox 布局文本框

Question

我正在尝试像这样布局我的文本框

这是我想要做的代码

 render() {
    return (
        <View style={styles.container}>
            <View style={styles.row}>
                <Headline style={styles.headlineText}>Adresse</Headline>
            </View>
            <View style={styles.row}>
                <Input style={styles.text}
                    placeholder="Strasse"
                />
                <Input style={styles.text}
                    placeholder="Nr"
                />
            </View>
            <View style={styles.row}>
                <Input style={styles.text}
                    placeholder="PLZ"
                />
                <Input style={styles.text}
                    placeholder="Stadt"
                />
            </View>
            <View style={styles.row}>
                <Button
                    onPress={() => this.props.navigation.navigate('PaymentInfo', { name: 'PaymentInfo' })}
                    title="Weiter"
                    style={styles.button}
                />
            </View>
        </View>

    );
}

这是样式表

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    backgroundColor: Colors.white,
    paddingBottom: normalize(20),
},
row: {
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    paddingHorizontal: normalize(20)
},
button: {
    marginTop: 20
},
text: {
    marginTop: 10
},
headlineText: {
    marginTop: normalize(30),
    marginBottom: 10,
    color: "black"
}});

但是我得到了这样的结果

谁能帮助我我应该怎么做才能使我的文本框呈现为第一张图片？非常感谢

Answer 1

您可以像这样使用flex属性：

        <View style={styles.row}>
            <Input style={[styles.text,{flex: 4, marginRight: 2}]}
                placeholder="Strasse"
            />
            <Input style={[styles.text,{flex: 1, marginLeft: 2}]}
                placeholder="Nr"
            />
        </View>
        <View style={styles.row}>
            <Input style={[styles.text,{flex: 3, marginRight: 2}]}
                placeholder="PLZ"
            />
            <Input style={[styles.text,{flex: 7, marginLeft: 2}]}
                placeholder="Stadt"
            />
        </View>

Answer 2

这是我为您的解决方案使用的方法flexbox，您可以尝试在 repl.it 中使用此链接， 并在您的设备repl.it上使用expo应用程序查看结果

<script src="//repl.it/embed/K58G/6.js"></script>

我在这里粘贴我的代码，或者您可以尝试使用我提供的链接

这个供查看

  <View style={styles.container}>
    <Text style={{fontSize:20}}> Adresses </Text>
    <View style={{flexDirection:'row'}}> 
      <TextInput 
        placeholder="Strase" 
        underlineColorAndroid = 'transparent'
        style={[styles.text,{flex: 7}]}
      />       
      <TextInput 
        placeholder="Nr"
        underlineColorAndroid = 'transparent'
        style={[styles.text, {flex: 3}]}
      />       
    </View>

    <View style={{flexDirection:'row', marginBottom: 10}}> 
      <TextInput
        placeholder="PLZ"
        underlineColorAndroid = 'transparent'
        style={[styles.text,{flex: 3}]}
      />       
      <TextInput 
        underlineColorAndroid = 'transparent'
        placeholder="Stadt" 
        style={[styles.text,{flex: 7}]}
      />       
    </View>

    <TouchableOpacity style={styles.button}>
      <Text style={{fontSize: 20}}>WEITHER</Text>
    </TouchableOpacity>
  </View>

  <View style={styles.container}>
    <Text style={{fontSize:20}}> Adresses </Text>
    <View style={{flexDirection:'row'}}> 
      <TextInput 
        placeholder="Strase" 
        underlineColorAndroid = 'transparent'
        style={[styles.text,{flex: 7}]}
      />       
      <TextInput 
        placeholder="Nr"
        underlineColorAndroid = 'transparent'
        style={[styles.text, {flex: 3}]}
      />       
    </View>

    <View style={{flexDirection:'row', marginBottom: 10}}> 
      <TextInput
        placeholder="PLZ"
        underlineColorAndroid = 'transparent'
        style={[styles.text,{flex: 3}]}
      />       
      <TextInput 
        underlineColorAndroid = 'transparent'
        placeholder="Stadt" 
        style={[styles.text,{flex: 7}]}
      />       
    </View>

    <TouchableOpacity style={styles.button}>
      <Text style={{fontSize: 20}}>WEITHER</Text>
    </TouchableOpacity>
  </View>

这对于风格

const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: Constants.statusBarHeight,
      paddingLeft: 10,
      paddingRight: 10,
      backgroundColor: '#ecf0f1',
    },
    paragraph: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
      color: '#34495e',
    },
    button: {
      height: 50, 
      marginTop: 10, 
      backgroundColor: 'orange', 
      alignItems: 'center', 
      justifyContent: 'center'
    },
    text: {
      fontSize: 24,
      margin: 4,
      padding: 10,
      height: 100, 
      borderWidth: 0.5,
      borderColor: '#0f0f0f',    
    },
    headlineText: {
      marginTop: 30,
      marginBottom: 10,
      color: "black"  
    }
  }
);