0

关于本教程“React Router Native - Passing Data” https://www.youtube.com/watch?v=SdOWxoH3HLg @benawad user:4272160 我不知道如何 {"val1:"bob","val2":5} 从字符串中提取 bob 或 5<Text>JSON.stringify(location.state)}</Text> 在页面之间传递数据时的字符串数据

我试图通过评论联系@benawad，我在谷歌和这里搜索过类似的东西，但发现没有相关性。我尝试了一个正则表达式没有成功，但无论如何必须有更好的方法......

代码位于https://github.com/benawad/react-router-native-example/tree/1_advanced

// Home.js
import React from "react";
import { View, Text, Button } from "react-native";

export default ({ history }) => (
  <View>
    <Text>This is the home page</Text>
    <Button title="change page" onPress={() =>
    history.push("/products", {val1: "bob", val2: 5})
    />
  </View>
);


// Products.js
import React from "react";
import { View, Text, Button } from "react-native";

 export default ({ history, location }) => (
  <View>
  <Text>Product 1</Text>
  <Text>Product 2</Text>
  <Text>{JSON.stringify(location.state)}</Text>
  <Button title="change page" onPress={() => history.push("/")}/>
  </View>
);

我想过尝试 JSON.parse 字符串化的数据。没有喜悦。我试过 location.state.val 但刚刚得到

TypeError: undefined is not an object (evaluating 'location.state.val')
4

2 回答 2

0

您需要通过historyapi 传递状态。Home将您的组件更改为

export default ({ history }) => (
  <View>
    <Text>This is the home page</Text>
    <Button title="change page" onPress={() => 
    history.push("/products", {val1: "bob", val2: 5)} />
  </View>
);

然后直接在您的组件中访问location.state.val1和。location.state.val2Products

有关教程代码中的类似行，请参阅https://github.com/benawad/react-router-native-example/blob/1_advanced/ChangePageButton.js#L9 。history

示例代码中JSON.stringify使用的只是作为说明，以便整个location.state可以显示在一个Text元素中。

于 2019-08-02T05:11:43.833 回答
0

您可以将道具传递给历史对象，

<Button title="change page" 
  onPress={() => history.push({
    pathname: '/',
    state: { locationData: JSON.stringify(location.state) } //JSON.stringify needed if you want to pass object otherwise don't use.
  })}
/>

在使用/路由渲染的组件中，您可以访问道具，例如，

{JSON.parse(props.location.state.locationData)}        //Functional component
{JSON.parse(this.props.location.state.locationData)}   //Class based component

注意： JSON.parse如果正在传递对象，则需要，否则无需使用。

于 2019-08-02T05:32:49.200 回答