Question

我是新来对本机与本机基础作出反应，我需要使用本机基础列表分隔符呈现数据，但我认为我做错了。这是我的代码
const routes = [ { title: "Menu", content: ["Recent Article", "Categories"] }, { title: "Social Media", content: ["Discord", "Twitch"] } ];

          <List
        contentContainerStyle={{ marginTop: 120 }}
        dataArray={routes} renderRow={(data) =>
       <View>
        <ListItem itemDivider>
          <Text>{data.title}</Text>
        </ListItem>    
            <ListItem
              button
              onPress={() => this.props.navigation.navigate(data.content)}
            > 
              <Text>{data.content}</Text>
            </ListItem>
      </View>
        }></List>

这是结果 result

希望你能帮助我

Answer 1

data.content是一个数组，您需要进行迭代以分别显示每个项目。

就像

<List
    contentContainerStyle={{ marginTop: 120 }}
    dataArray={routes} renderRow={(data) =>
      <View>
        <ListItem itemDivider>
          <Text>{data.title}</Text>
        </ListItem>
        {
           (data.content || []).map(value => {
              return (
                <ListItem
                  button
                  onPress={() => this.props.navigation.navigate(value)}
                > 
                  <Text>{value}</Text>
                </ListItem>
              )
           })
        }
      </View>
    }
/>

希望这会有所帮助！

如何在React Native中渲染数据以制作节列表

1 个答案: