Question

反应本机平面列表：

我可以使用单个平面列表显示设置屏幕内容吗？因为设置屏幕将具有不同的类别，例如选择语言，通知设置，区域选择，

我的问题是如何在单个平面列表中显示不同的子类别。下面的屏幕截图包含平面列表中的三个不同部分列表，我不明白如何定义有效负载以获取响应，如下面的屏幕截图数据所示。

这是我的平面列表的randerData：

renderData = ({ item, index }) => {
if(item.SelectLanguage.length>1){
    return(
        <View style={{flex:1,backgroundColor:"red",paddingVertical:20}}>

        </View>
    )
} else if(item.NotificationPreference.length>1){
    return(
        <View style={{flex:1,backgroundColor:"green",paddingVertical:20}}>

        </View>
    )
} else if(item.SelectLocation.length>1){
    return(
        <View style={{flex:1,backgroundColor:"blue",paddingVertical:20}}>

        </View>
    )
}

}

const sampleSettingsData = [
{  
    "SelectLanguage":[
       {  
          "lang":"English(US)",
          "id":0
       },
       {  
          "lang":"German",
          "id":1
       },
       {  
          "lang":"Spanish",
          "id":2
       }
    ],
    "NotificationPreference":[  
       {  
          "refTitle":"notification title 1",
          "id":0
       },
       {  
          "refTitle":"notification title 2",
          "id":1
       },
       {  
          "refTitle":"notification title 3",
          "id":2
       }
    ],
    "SelectLocation":[  
       {  
          "locationName":"Location 1",
          "id":0
       },
       {  
          "locationName":"Location 2",
          "id":1
       }
    ]
 }
];

Answer 1

您可以使用JSON数组将数据按不同类型放在不同的类别中以及何时在Flatlist中使用renderItem，可以按类型为每个项目创建特定的视图。

示例代码：

renderItem = ({ item }) => {
if (item.type=='type1') {
  return (
    <ListItem>
      ...
    </ListItem>
  );
} else if (item.type=='type2') {
  return (
    <ListItem>
    ...
  </ListItem>
  );
}else if(item.type=='type3'){
   return (
    <ListItem>
    ...
  </ListItem>
    )
}}

将React Native Flat List显示数据用于SETTINGS屏幕，如何使用单个Flat List显示

1 个答案: