Question

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

预期的输出视图：该视图就像普通我们的系统文件夹标题结构一样。 C：/ user / ReactNative / file ..类似图块视图。

例如： 1.FamilyScreen.js 参数：Gradpa->单击“祖父”时，它将导航到同一页面，但数据更改为“父亲”

FamilyScreen.js params：Me-单击“父亲”时，它将导航到同一页面，但数据为“ Erick and Rose”。

数据将来自服务，因此它可能包含的内容比孩子还多。它会变种。如何以本机方式传递特定数据。

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,
          },
        ],
      },
    ],
  },
]

谢谢

Answer 1

最后可以正常工作，这里的代码是

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数组数据

1 个答案: