React Native：条件视图

Question

我想这样做，以便根据我的结果（我的数据元素的数量），我可以在我的代码中添加一定数量的行。例如，如果此数字为 0=>1row，1=>1row，2=>2row，3=>2row，4=>3row，... 我确实尝试过，但结果总是在 1 行：

              let count = 0;
              let reste = 0;
              let total = 1;
              let same = 0;
...
//I'm doing a map of my data here so this code is used as many time as there is of elements //in my data
                    if (total !== same) {
                      return (
                        <View style={{ width: "40%", marginLeft: 70 }}>
                          <Text
                            style={{
                              fontSize: 18,
                              fontWeight: "600",
                              marginTop: 25,
                              width: "50%",
                            }}
                          >
                            {count++}
                            {(reste = count % 2)}
                            {(total = (count + reste) / 2)}
                            {letter.data[index]}
                            {"\n"}
                          </Text>
                          <Text style={{ marginTop: 50, width: "50%" }}>
                            {letter.description[index]}
                            {"\n"}
                          </Text>
                        </View>
                      );
                    } else {
                      return (
                        <View style={{ flexDirection: "column" }}>
                          <View style={{ width: "40%", marginLeft: 70 }}>
                            <Text
                              style={{
                                fontSize: 18,
                                fontWeight: "600",
                                marginTop: 25,
                                width: "50%",
                              }}
                            >
                              {count++}
                              {(reste = count % 2)}
                              {(total = (count + reste) / 2)}
                              {letter.data[index]}
                              {"\n"}
                            </Text>
                            <Text style={{ marginTop: 50, width: "50%" }}>
                              {letter.description[index]}
                              {"\n"}
                            </Text>
                          </View>
                        </View>
                      );
                    }

有什么解决办法吗？我什么都没找到。

Answer 1

从评论中对我的问题的回答来看，你想要 2 columns 和 n 行。

您可以使用 FlatList 并将 numColumns 设置为 2，行处理将由组件自动完成。

这是一个最小的示例，其中 data 是您的数据数组。为了简单起见，我删除了样式。

<FlatList
    data={data}
    numColumns={2}
    keyExtractor={(_, index) => index.toString()}
    renderItem={({item}) => {
        return <View>
            <Text>
                {letter.description[index]}   
            </Text>
        </View>
    }}
/>

React Native：条件视图

React Native : Conditional Views

reactjs

typescript

react-native