React-Native 嵌套平面列表

Posted 2023-02-21

【中文标题】React-Native 嵌套平面列表

【英文标题】：React-Native nested Flatlist

【发布时间】：2018-06-09 16:49:15

【问题描述】：

我正在尝试使用此人可能拥有的图像显示厨师的个人资料。我有一系列厨师，其中包含一些信息，例如姓名和个人资料图片。 Cooks 数组还包含一个图片数组。我想显示 cook.profile Pic 名称，然后显示链接到他们的个人资料的照片列表。我可以显示姓名和个人资料图片，但我不确定如何在每个厨师的姓名下显示图片数组（水平滚动）。 这里是厨师数组：

cooks = [
        "id": "1001",
        "firstName": "Mike",
        "profilePic": "Portrait.jpg",
        "photos": [
                "url": "img.jpg"
            ,
            
                "url": "img2.jpg"
            ,
            
                "url": "img3.jpg"
            ,
            
                "url": "img4.jpg"
            
        ]
    ,
    
        "id": "1002",
        "firstName": "Marla",
        "profilePic": "profilePic.jpg",
        "photos": [
                "url": "img1.jpg"
            ,
            
                "url": "img2.jpeg"
            ,
            
                "favorite": "true",
                "url": "img3.jpg"
            ,
            
                "url": "img4.jpeg"
            
        ]
    
]

================================================ ====================

    <FlatList
        data=this.props.cooks
        renderItem=( item ) => (
          <View>
            <TouchableOpacity >
            <CardSection>
              <View style=thumbnailContainerStyle>
                <Image
                  style=thumbnailStyle
                  source= uri: item.profilePic 
                />
                </View>
                <View style=headerContentStyle>
                  <Text style=headerTextStyle>item.firstName</Text>
                </View>
          </CardSection>
          </TouchableOpacity>
          /*
            following part is not working as expected.
          */
          <FlatList
              data=item.photos
              renderItem=( item2 ) =>
              <View>
                <Image
                  style=imageStyle
                  source= uri: item2.url 
                />
              </View>
            
            keyExtractor=(item2, index) => index
          />
          </View>
        )
        keyExtractor=(item, index) => index
      />

================================================ =============

const styles = 
  iconStyle: 
      paddingLeft: 10,
      justifyContent: 'center',
      alignItems: 'center',
      height: 23,
      width: 25
  ,
  containerStyle: 
    flexDirection: 'row',
    flex: 1
  ,
  inputStyle: 
    paddingLeft: 10,
    fontSize: 30,
    height: 30,
    width: 350
  ,
  headerContentStyle: 
    flexDirection: 'column',
    paddingTop: 20
  ,
  headerTextStyle: 
    fontSize: 25
  ,
  thumbnailStyle: 
    borderRadius: 15,
    height: 100,
    width: 100
  ,
  thumbnailContainerStyle: 
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  ,
  imageStyle: 
    height: 400,
    flex: 1,
    width: null
  
;

【问题讨论】：

not working as expected. 是什么意思？ + 不显示 + 或错误/异常

我不应该说“没有按预期工作”。首先，我不确定我是否可以像这样嵌套 FlatList。当我运行上面的代码时，我收到错误：TypeError：无法读取未定义的属性“url”。当检查 ...cooks.photos 的控制台日志时，我可以看到属性“url”。感谢您花时间帮助我。

请重新检查您在上面提供的cooks 数据。它是无效的 json

抱歉，在缩短 json 时搞砸了。我现在更新了。

我认为这是不可能的，除非您将垂直列表作为父级，将水平作为子级，反之亦然

【参考方案1】：

这是我在我的一个项目中创建的一个示例。看看它可能对你有帮助

class Test extends Component 
  constructor(props) 
    super(props);
    this.state = 
      data: "",
      dummy: [
        
          _id: "5e12905eb10fe53808d1ca55",
          name: "WHY NAME EXISTS -_-",
          stage: "Confirmed",
          feedback: 
            _id: "5e12905eb10fe53808d1ca56",
            rating: 1,
            review: "bad bad only bad."
          ,

          itemDetails: [
            
              _id: "5e12905eb10fe53808d1ca5a",
              nameXquantity: "Lehsun Adrak x100",
              individualTotal: 155
            ,
            
              _id: "5e12905eb10fe53808d1ca59",
              nameXquantity: "Lehsun x50",
              individualTotal: 25
            ,
            
              _id: "5e12905eb10fe53808d1ca58",
              nameXquantity: "Lehsun Adrak Dhaniya Shimla mirch x Infinity",
              individualTotal: 9969
            
          ],

          __v: 0
        
      ]
    ;
  


  render() 
    return (
      <SafeAreaView>
        <ScrollView>
          <FlatList
            data=this.state.dummy
            renderItem=( item ) => (
              <View>
                <Text>item.name</Text>
                <FlatList
                  data=item.itemDetails
                  renderItem=( item ) => <Text>item.nameXquantity</Text>
                  keyExtractor=item => item._id
                />
              </View>
            )
            keyExtractor=item => item._id
          />
        </ScrollView>
      </SafeAreaView>
    );
  


export default Test;

【讨论】：

滚动视图下不建议使用FlatList

【参考方案2】：

您可以从“react-native”库中实现 SectionList，而不是使用嵌套的 FlatList。它更容易和更好的解决方案。你有所有的文档here。希望对您有所帮助！