如何在 React Native 中渲染数据以制作 Section List

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 中渲染数据以制作 Section List

How to render data to make Section List in React Native

react-native

native-base