将导航和道具传递给反应本机组件时未定义的功能（基本断开按钮）

Question

我是一个完全的新手，我正在尝试让堆栈导航器只有在用户登录后才能访问，这很有效，但我无法设法让断开连接按钮正常工作。到目前为止，我正在使用一个简单的 bool 来授予访问权限。用于断开连接的函数，作为道具传递，在我使用断开连接按钮时找不到。

App/Login 屏幕：

const Stack = createStackNavigator();

export default function App() {
  const [userIsLogged, setUserLog] = useState(false);

  if (!userIsLogged) {
    return <LoginScreen setUserLog={setUserLog}/>;
  } else {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home">
            {props => <Home {...props} setUserLog={setUserLog}/>}
          </Stack.Screen>
          <Stack.Screen name="Rooms" component={Rooms}/>
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

调用断开按钮的地方：

const Home = ({navigation}, props) => {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <TouchableOpacity onPress={() => props.setUserLog(false)}>
        <Text>DISCONNECT</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('Rooms')}>
        <Text>ACCESS TO ROOMS</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
};

（代码已大大简化以仅突出显示我的问题）

Answer 1

改变

const Home = ({navigation}, props) => {

到

const Home = (props) => {
const {navigation} = props;

return /* REST OF CODE */

({navigation}, props) 不会将道具分成两组，它会为您的函数定义两个参数。这意味着道具将永远是 undefined 因为在这种情况下你永远不会传递第二个参数。

将导航和道具传递给反应本机组件时未定义的功能（基本断开按钮）

undefined function when passing navigation AND props to a react native component (basic disconnect button)

javascript

reactjs

react-native

react-navigation

react-navigation-stack