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

しかし、私はこのような結果を得ました

テキストボックスを最初の画像としてレンダリングするにはどうすればよいですか? どうもありがとう