React Navigation v6:如何将任意属性传递给选项卡导航器?

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

React Navigation v6: How do you pass arbitrary props to Tab Navigator?

问题

我在我的React Native应用中使用React Navigation v6有以下选项卡导航器:

<Tab.Navigator>
  <Tab.Screen name="Screen1" component={Screen1}/>
  <Tab.Screen name="Screen1" component={Screen2}/>
</Tab.Navigator>

我想传递一个名为 prop1 的属性,以便在每个屏幕中访问。我该如何做?

英文:

I have the following Tab Navigator in my React Native app, using React Navigation v6:

&lt;Tab.Navigator&gt;
  &lt;Tab.Screen name=&quot;Screen1&quot; component={Screen1}/&gt;
  &lt;Tab.Screen name=&quot;Screen1&quot; component={Screen2}/&gt;
&lt;/Tab.Navigator&gt;

I want to pass a prop called prop1 that will be accessible in each screen. How do I do this?

答案1

得分: 1

将组件从component属性移到屏幕的子组件中,示例:

<Tab.Navigator>
  <Tab.Screen name="Screen1">
    {() => <Screen1 prop1={prop1} />}
  </Tab.Screen>
  <Tab.Screen name="Screen2">
    {() => <Screen2 prop1={prop1} />}
  </Tab.Screen>
</Tab.Navigator>

官方文档链接

英文:

You can do this by moving the component from the component prop to become a child of the screen. Example:

&lt;Tab.Navigator&gt;
  &lt;Tab.Screen name=&quot;Screen1&quot;&gt;
    {() =&gt; &lt;Screen1 prop1={prop1} /&gt;}
  &lt;/Tab.Screen&gt;
  &lt;Tab.Screen name=&quot;Screen2&quot;&gt;
    {() =&gt; &lt;Screen2 prop1={prop1} /&gt;}
  &lt;/Tab.Screen&gt;
&lt;/Tab.Navigator&gt;

Official doc here

huangapple
  • 本文由 发表于 2023年6月1日 03:06:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76376566.html
匿名

发表评论

匿名网友

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

确定