8

I'm having some trouble with a react-native app. I can't figure out how to pass data across screens.

I realize that there are other similar questions that are answered on SO, however the solutions did not work for me.

I'm using the StackNavigator. Here's my setup in my App.js file.

export default SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Categories: { screen: CategoriesScreen }, // send from here
    Category: { screen: CategoryScreen }      // to here
});

I have a TouchableHighlight component which has a onPress event that will navigate to the desired screen. This is on my Categories.js file/screen.

<TouchableHighlight onPress={(id) => {
    const { navigate } = this.props.navigation;
    navigate('Category', { category: id });
}}>
    <Text>{name}</Text>
</TouchableHighlight>

When I click the element, the screen does indeed switch to category, however it fails to send the props data.

So when I check the data in my Category screen, it returns undefined. I have tried the following methods:

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

How exactly can I access that data that I passed in the navigate method?

navigate('Category', { category: id });

Edit: Here is my actual code structure:

The data comes from a API.

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(id) => {
                        const { navigate } = this.props.navigation;
                        navigate('Category', { params: { category: id } });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}
4

4 回答 4

5

您的问题不是发送参数。您发送正确并正确阅读。您的错误与您id的未定义有关。

你应该像下面这样修复你的代码，

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(event) => {
                        // onPress event fires with an event object
                        const { navigate } = this.props.navigation;
                        navigate('Category', { category: id });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

您可以读取您的参数，如下所示。

this.props.navigation.state.params.category
于 2017-10-02T14:11:09.553 回答
0

因此，查看上述问题，我认为您正在寻找类似screenProps（在此处记录）的内容。

这允许您跨屏幕传递特定的道具。

我希望这有帮助。如果您需要其他任何东西，请告诉我。

于 2017-10-02T14:12:37.280 回答
0

从父屏幕：

navigate({ routeName: 'Category',  params: { category: id } })

或者

navigate('Category', { category: id })

从子屏幕：

const category = this.props.navigation.state.params.category

于 2017-10-02T13:58:16.150 回答
0

使用以下代码片段，您可以导航到具有某些值的另一个屏幕。

navigate({ Home: 'HomeScreen',  params: { username: 'abcd' } })

您可以使用 HomeScreen 收集参数，

this.props.navigation.state.params.username
于 2019-03-26T13:13:11.077 回答