React Native：2つのTextInputを並べて並べます

Question

私はReact Nativeから始めています.RNを使ってアプリを開発しています...私はちょっとここにこだわっています...私はアプリのコンポーネント

下の画像のように並んで整列TextInputsのカップルここで私は上記の設計を達成しようとして書かれているコードがあるしています。

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, 
    } 


}); 

代わりに私はこのような考え方を得ています。

私は、これはマイナーなものになる可能性が知っているが、私はその上で言ったように私はちょうど始まる午前ネイティブリアクトので、あなたが... noobのようにあなたの助けを事前に感謝し、私を検討することができます。あなたの答えを楽しみにしています。

Answer 1

スタイル

で使用する "flexDirection" あなたの答えのための

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