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 中的此链接，并在您的 expo 应用上查看结果设备repl.it

＆＃13;

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

＆＃13;

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

此视图

  <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"  
    }
  }
);

使用Flexbox布局文本框反应原生

2 个答案: