在React Native中将一个变量从一个文件传递到另一个文件中：

huangapple
go评论184阅读模式
英文:

Pass a variable from one file to another in React Native

问题

我正在使用React Native构建一个前端应用程序。一个文件（屏幕）使用以下代码生成一个令牌。

在另一个文件中，我必须使用该令牌进行验证。

我不知道如何在这两个文件之间传递令牌。

英文:

I'm building a front end app on React Native. One file (screen) is generating a Token using the following code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. fetch(&quot;http://192.168.1.11:8080/api/login&quot;, {
  2.                 method: &#39;POST&#39;,
  3.                 body: JSON.stringify({
  4.                     username: &#39;user&#39;
  5.                 }),
  6.                 headers: {
  7.                     &#39;Accept&#39;: &#39;application/json&#39;,
  8.                     &#39;Content-Type&#39;: &#39;application/json&#39;,
  9.                 }
  10.         
  11.         
  12.             }).then((response) =&gt; response.json())
  13.       .then((json) =&gt; {
  14.         this.setState({ JwToken: json.token });
  15.       }).then((json) =&gt;this.props.navigation.navigate(&#39;Home&#39;)/)
  16.       .catch((error) =&gt; console.error(error))
  17.       .finally(() =&gt; {
  18.         this.setState({ isLoading: false });
  19.       });

<!-- end snippet -->

In another file I must use that token for verification

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. fetch(&#39;http://192.168.1.11:8080/api/books&#39;, {
  2.   method: &#39;POST&#39;,
  3.   headers: {
  4.     Accept: &#39;application/json&#39;,
  5.     &#39;Content-Type&#39;: &#39;application/json&#39;,
  6.     &#39;Authorization&#39;: &#39;Bearer &#39; + JwToken
  8.   },
  9.   body: JSON.stringify({
  10.     title: &#39;new book&#39;,
  11.     price: 4
  12.   })
  13. });

<!-- end snippet -->

I had no idea how to pass the token between the two files.

答案1

得分: 1

这是我以前从React Navigation 文档中引用过的内容，似乎符合您的需求。

  1. function HomeScreen({ navigation }) {
  2.   return (
  3.     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  4.       <Text>Home Screen</Text>
  5.       <Button
  6.         title="Go to Details"
  7.         onPress={() => {
  8.           /* 1. 使用参数导航到 Details 路线 */
  9.           navigation.navigate('Details', {
  10.             itemId: 86,
  11.             otherParam: '你想要的任何内容',
  12.           });
  13.         }}
  14.       />
  15.     </View>
  16.   );
  17. }
  19. function DetailsScreen({ route, navigation }) {
  20.   /* 2. 获取参数 */
  21.   const { itemId } = route.params;
  22.   const { otherParam } = route.params;
  23.   return (
  24.     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  25.       <Text>Details Screen</Text>
  26.       <Text>itemId: {JSON.stringify(itemId)}</Text>
  27.       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
  28.       <Button
  29.         title="再次前往详情页"
  30.         onPress={() =>
  31.           navigation.push('Details', {
  32.             itemId: Math.floor(Math.random() * 100),
  33.           })
  34.         }
  35.       />
  36.       <Button title="前往首页" onPress={() => navigation.navigate('Home')} />
  37.       <Button title="返回" onPress={() => navigation.goBack()} />
  38.     </View>
  39.   );
  40. }
英文:

This is something I've referenced before from the React Navigation Docs that seems to fit your needs.

  1. function HomeScreen({ navigation }) {
  2. return (
  3. &lt;View style={{ flex: 1, alignItems: &#39;center&#39;, justifyContent: &#39;center&#39; }}&gt;
  4. &lt;Text&gt;Home Screen&lt;/Text&gt;
  5. &lt;Button
  6. title=&quot;Go to Details&quot;
  7. onPress={() =&gt; {
  8. /* 1. Navigate to the Details route with params */
  9. navigation.navigate(&#39;Details&#39;, {
  10. itemId: 86,
  11. otherParam: &#39;anything you want here&#39;,
  12. });
  13. }}
  14. /&gt;
  15. &lt;/View&gt;
  16. );
  17. }
  18. function DetailsScreen({ route, navigation }) {
  19. /* 2. Get the param */
  20. const { itemId } = route.params;
  21. const { otherParam } = route.params;
  22. return (
  23. &lt;View style={{ flex: 1, alignItems: &#39;center&#39;, justifyContent: &#39;center&#39; }}&gt;
  24. &lt;Text&gt;Details Screen&lt;/Text&gt;
  25. &lt;Text&gt;itemId: {JSON.stringify(itemId)}&lt;/Text&gt;
  26. &lt;Text&gt;otherParam: {JSON.stringify(otherParam)}&lt;/Text&gt;
  27. &lt;Button
  28. title=&quot;Go to Details... again&quot;
  29. onPress={() =&gt;
  30. navigation.push(&#39;Details&#39;, {
  31. itemId: Math.floor(Math.random() * 100),
  32. })
  33. }
  34. /&gt;
  35. &lt;Button title=&quot;Go to Home&quot; onPress={() =&gt; navigation.navigate(&#39;Home&#39;)} /&gt;
  36. &lt;Button title=&quot;Go back&quot; onPress={() =&gt; navigation.goBack()} /&gt;
  37. &lt;/View&gt;
  38. );
  39. }

huangapple
  • 本文由 发表于 2020年8月23日 02:58:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/63540011.html
  • api
  • java
  • javascript
  • react-native
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定