尝试在react-native中创建两列

Posted 2021-04-21

我正在尝试使用flex创建一个双列网格。一列将用于显示单词或短语，第二列将用于翻译第一列。这是一个链接：http://imgur.com/nZGo8pb，为您提供有关我想要实现的目标的视觉概念。

我无法并排获得两列。我只能让我的话语出现在彼此之上。这是最好的尝试。巨大的失败.http://imgur.com/a/ICApr

我的代码是：

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; 

任何帮助将不胜感激。

谢谢。

答案

您需要使用以下样式将两个内部容器包装在另一个<View>中：

<View style={styles.container}>

  <TextInput
    style={styles.input}
    onChangeText={(word) => {
      this.setState({ word })
    }}
    onEndEditing={this.addWord}
  />

  <View style={{ flexDirection: 'row', flex: 1 }}>
    <View style={styles.wordContainer}>
      ...
    </View>
    <View style={styles.item2}>
      ...
    </View>
  </View>

</View>

另一答案

这是因为flexDirection中的styles.wordContainer设置为'column'，它应该设置为'row'。

在flex-direction示例中查看this link。