React Native: Ausrichten von zwei TextInputs Seite an Seite

Question

Ich beginne gerade mit React Native und ich entwickle eine App mit RN ... Ich bin hier stecken geblieben ... Ich habe ein Formular in einer der Komponente der App, die im Bild haben einige TextInputs nebeneinander ausgerichtet sind wie unten

Hier ist der Code, den ich geschrieben habe versucht, die oben Design zu erreichen.

import React, {Component} from 'react'; 
import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native'; 


export default class AddItems extends Component { 
    onAdd() { 
     alert('Hello'); 
    } 

    render() { 
    return (
     <View style={addItemStyles.wrapper}> 
      <View> 
       <Text>Item to give cash credit for:</Text> 
       <View> 
        <View> 
         <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} /> 
        </View> 
        <View> 
         <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} /> 
        </View> 
       </View> 
      </View> 

     </View> 
    ); 
} 
} 

const addItemStyles = StyleSheet.create({ 
    wrapper: { 
     padding: 10, 
     backgroundColor: '#FFFFFF' 
    }, 
    inputLabels: { 
     fontSize: 16, 
     color: '#000000', 
     marginBottom: 7, 
    }, 
    inputField: { 
     backgroundColor: '#EEEEEE', 
     padding: 10, 
     color: '#505050', 
     height: 50 
    }, 
    inputWrapper: { 
     paddingBottom: 20, 
    }, 
    saveBtn: { 
     backgroundColor: '#003E7D', 
     alignItems: 'center', 
     padding: 12, 
    }, 
    saveBtnText: { 
     color: '#FFFFFF', 
     fontSize: 18, 
    } 


}); 

Aber stattdessen bekomme ich die Ansicht so.

Ich weiß, das eine kleine Sache sein könnte, aber wie ich oben gesagt, daß ich beginne gerade mit dem gebürtigen Reagieren, so dass Sie mich als Noob betrachten können ... Vielen Dank im Voraus für Ihre Hilfe. Ich freue mich auf Ihre Antworten.

Answer 1

use "flexDirection" im Stil

render() { 
    return (
     <View style={addItemStyles.wrapper}> 
      <View> 
       <Text>Item to give cash credit for:</Text> 
       <View style={{flexDirection:"row"}}> 
        <View style={{flex:1}}> 
         <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} /> 
        </View> 
        <View style={{flex:1}}> 
         <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} /> 
        </View> 
       </View> 
      </View> 

     </View> 
    ); 
}