React-native 中具有不同嵌套 Json 数组数据的同一屏幕 [英] Same screen with different Nested Json array data in React-native

问题描述

我试图在 react-native 中显示具有不同参数的相同屏幕.我检查了 https://snack.expo.io/@react-navigation/navigate-with-params-v3.它的工作正常.但我必须在同一屏幕上显示不同的数据.我的期望是在树视图结构中数据必须像在我们正常的系统平铺视图文件夹结构中一样显示.

I am trying to display same screen with different parameter in react-native. i checked with https://snack.expo.io/@react-navigation/navigate-with-params-v3. its working fine. But i have to display the different data in same screen. My expectation is in tree view structure data have to display like in our normal system tile view folder structure.

预期输出视图:视图像正常我们的系统文件夹标题结构.C:/user/ReactNative/file .. 像平铺视图.

Expected Output view: The view like normal our system folder title structure. C:/user/ReactNative/file .. like tile view.

例如:1.FamilyScreen.jsparams : Gradpa -> 当点击 Grandpa 时，它将导航到同一页面，但数据更改为父亲"

Ex: 1.FamilyScreen.js params : Gradpa -> while click Grandpa it will navigate to same page but the data change as 'Father'

1. FamilyScreen.jsparams:Me - 点击父亲"时，它将导航到同一页面，但数据为埃里克和罗斯".

数据将来自服务，因此它可能包含比儿童更多的数据.它会变种.如何在 react-native 中传递特定数据.

The data will come from service so it may contain some more than children. it will variant. How to pass the particular data in react-native.

const family = [
  {
    id: 'Grandparent',
    name: 'Grandpa',
    age: 78,
    children: [
      {
        id: 'Father',
        name: 'Father',
        age: 30,
        children: [
          {
            id: 'Erick',
            name: 'Erick',
            age: 10,
          },
          {
            id: 'Rose',
            name: 'Rose',
            age: 12,
          },
        ],
      },
    ],
  },
]

谢谢

推荐答案

终于可以工作了，这里是我的代码

Finaly its working, here my code is

constructor(props) {
        super(props)    
        this.state = {
             res:family,               
        }           
        this.getNestedData = this.getNestedData.bind(this);
    }    
getNestedData (item)  {      
         var data;
                  Object.keys(item).map((propKey) => {
                    if ( propKey === 'children'){            
                        data=item[propKey]                   

                }

            })


            this.props.navigation.push('GridScreen',{
                data:data
            });

        }

        Item = ({ item }) => {

            return (
                <View style={styles.item}>
                    <Text style={styles.title} onPress={this.getNestedData.bind(this,item)}>{item.name}</Text>
                </View>
            );
        }
        render() {
            const { navigation } = this.props;
        const data = navigation.getParam('data', this.state.res);

            return (
                <View>
                    <FlatList
                        data={data }
                        renderItem={({ item }) => <this.Item item={item} />}
                        keyExtractor={item => item.id}
                        numColumns={3}
                    />

                </View>
            )
        }
    }

这篇关于React-native 中具有不同嵌套 Json 数组数据的同一屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！