React Native：如何通过共用Sign组件将Login/Register的log值传至Dashboard？

步骤1：修正Register/Login组件的log参数传递语法 #

原代码中传递log的写法存在语法错误，需改为标准对象字面量形式：

// register.js 修正后
export default function Register(props) {
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <Sign navigation={props.navigation} log={{name:"register"}} />
      </View>
    </View>
  );
}

// login.js 修正后
export default function Login(props) {
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <Sign navigation={props.navigation} log={{name:"login"}} />
      </View>
    </View>
  );
}

步骤2：修改Sign组件，接收log参数并在跳转时传递 #

让Sign组件接收外部传入的log参数，在Google登录完成后，将userInfo和log一起通过路由跳转传递给Dashboard：

// sign.js 修正后
export default function Sign({navigation, log}) { // 新增log参数接收
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    setuserInfo(userInfo);
    // 同时传递userInfo和log到Dashboard
    navigation.navigate('dash', {userInfo, log});
  }
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <GoogleSigninButton
          style={{width: 192, height: 48}}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Light}
          onPress={onGoogleButtonPress}
        />
      </View>
    </View>
  );
}

步骤3：修改Dashboard组件，从路由参数中获取log #

Dashboard组件的log参数存储在route.params中，需从对应位置解构获取：

// dash.js 修正后
export default function Dash(props) {
  const [text, setTextbaby] = useState();

  const {userInfo, log} = props?.route?.params || {}; // 新增log解构
  console.log(log); // 现在可以正确打印log参数
}

内容的提问来源于stack exchange，提问作者vivek kn