在React Native中传递URL查询参数可以通过以下步骤实现:
useNavigation
钩子或withNavigation
高阶组件来获取导航对象。navigate
方法来跳转到目标页面,并传递一个包含查询参数的对象作为第二个参数。
import { useNavigation } from '@react-navigation/native';
const MyComponent = () => {
const navigation = useNavigation();
const handleButtonPress = () => {
navigation.navigate('TargetScreen', { queryParam: 'value' });
};
return (
<Button title="Go to Target Screen" onPress={handleButtonPress} />
);
};
route
对象的params
属性来获取传递的查询参数。
import { useRoute } from '@react-navigation/native';
const TargetScreen = () => {
const route = useRoute();
const { queryParam } = route.params;
// 使用查询参数进行相应的操作
return (
// 目标页面的内容
);
};
通过以上步骤,你可以在React Native中成功传递URL查询参数。请注意,这里的示例使用了React Navigation库来实现导航功能,你可以根据自己的需求选择其他导航库或自行实现导航逻辑。
推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)
领取专属 10元无门槛券
手把手带您无忧上云