时间戳

首页 > 解决方案 > 反应导航 Stack.Screen 中的 {...props} 是什么？

javascript - 反应导航 Stack.Screen 中的 {...props} 是什么？

问题描述

这个页面{...props}的意义是什么？

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

也没有{...props}，我的应用程序运行良好。

标签： javascriptreactjsreact-nativereact-navigation

解决方案

根据文档描述：

有时我们可能想要将额外的道具传递给屏幕。

为了传递额外的道具，它使用渲染器（渲染回调）函数。实际上，它是额外的，显然你的代码应该没有它。

正式用法如下：

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

此外，在正式用法中React Navigation，对屏幕组件进行优化以防止不必要的渲染。我建议您使用这种样式，但是如果您需要Stack.Screen传递给渲染组件的其他道具，请使用渲染器版本，但请注意使用渲染器会删除整个给定的优化React Navigation。

如果你想知道额外的道具是什么，请使用渲染器版本，然后在组件中使用console.log它：HomeScreen

const HomeScreen = props => {
  console.log(props);

  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

推荐阅读