Versuchen, erstellen Sie zwei Spalten in reagieren-native

Ich bin versucht, zu erstellen eine zweispaltige raster mit flex. Eine Spalte wird verwendet, um anzuzeigen, ein Wort oder einen Satz und die zweite Spalte die übersetzung der ersten Spalte. Hier ist ein link: http://imgur.com/nZGo8pb, um Ihnen eine visuelle Idee auf was ich versuche zu erreichen.

Ich bin nicht in der Lage, um zwei Spalten nebeneinander. Ich bin nur in der Lage, meine Worte haben erscheinen auf der jeweils anderen. Dies ist der beste Versuch. Ein riesiger Fehler.http://imgur.com/a/ICApr

Mein code ist:

nent} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';

class AddWords extends Component{

    state = {words:['iku','konkai','kaikan'],
             word:'',
             EnglishWords:['go','this time','next time']    
            }

    renderList(tasks){
      return(
        tasks.map((task) =>{
         return(
            <View key={task} style={styles.item}>
             <Text>
             {task}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    renderEnglishWords(english){
      return(
        english.map((english) =>{
         return(
            <View key={english} style={styles.item2}>
             <Text>
             {english}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    addWord(){
        let words = this.state.words.concat([this.state.word]);
        this.setState({words})


    }
    render(){
        return(
         <View style={styles.container}>
          <TextInput
            style={styles.input}
            onChangeText={(word) => {
                this.setState({word})
            }}
            onEndEditing={()=>this.addWord()}
           />
         <View style={styles.wordContainer}>     
          {this.renderList(this.state.words)}
          {this.renderEnglishWords(this.state.EnglishWords)}
          <View style={styles.item2}>

          </View>
          </View>
         </View>

        )
    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,
        borderWidth:3,
        borderColor:'green',
        flexDirection:'column',
        paddingTop:10

    },
    wordContainer:{

    flexDirection: 'column',
    borderColor:'blue',
     borderWidth:2  


    },
    input:{
      height:60,
      borderWidth:1,
      borderRadius:5,
      borderColor:'black',
      textAlign:'center',
      margin:10,
      paddingTop:20,
      paddingBottom:10

    },
    item:{
    borderColor:'red',
     borderWidth:2   


    },
    item2:{
     borderColor:'black',
     borderWidth:2,
     flexDirection:'column',
    }
})
export default AddWords; 

Jede Hilfe wird sehr geschätzt.

Dank.

InformationsquelleAutor Saori Taylor | 2016-11-15