React Native 将值从一个组件传递到另一个组件

ef1yzkbh  于 2022-11-30  发布在  React
关注(0)|答案(2)|浏览(181)

我试图从登录和注册传递值到 Jmeter 板,因为标志是一个唯一的组件,我不知道如何从登录和注册传递日志,有人能帮助吗

签名.js

export default function Sign({navigation}) {
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    setuserInfo(userInfo);
   navigation.navigate('dash', {userInfo});
  }
  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}
          // disabled={this.state.isSigninInProgress}
        />
      </View>
    </View>
  );
}

注册.js

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

登入

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

破折号.js

export default function dash(props) {
  const [text, setTextbaby] = useState();

  const {userInfo} = props?.route?.params;
  console.log(props.log);
qf9go6mv

qf9go6mv1#

您应该在Sign组件中传递log prop,并像这样处理它。

export default function Sign({ navigation, log }) {
 async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    setuserInfo(userInfo);
   navigation.navigate('dash', {userInfo, log});
  }
// some code

}

毕竟,log将位于props.route.params对象内部

export default function dash(props) {
  const [text, setTextbaby] = useState();

  const {userInfo, log} = props?.route?.params;
  console.log(log);

}

UPDATED:使用双括号(以便传递对象)

log={{name: "register"}}
log={{name: "login"}}
gcuhipw9

gcuhipw92#

我们可以通过async-storagereact-navigation将值从一个屏幕传递到另一个屏幕,或者全局声明一个值。要将值从登录传递到 Jmeter 板,我建议您查看此async-storage Docs https://react-native-async-storage.github.io/async-storage/docs/install
async-storage将值存储在应用程序中,而React navigation不将值存储在应用程序中,React navigation只是将值从一个屏幕传输到另一个屏幕。react navigation Docs https://reactnavigation.org/docs/navigating/将值从一个组件传输到另一个组件

import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. Get the param */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}```

相关问题