react-navigation - React Native Stack Navigator 传递道具
问题描述
我想将一些道具(值)传递到另一个页面,我正在使用stackNavigator
应用程序.js:
import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";
const Stack = createStackNavigator();
NavigationContainer>
<Stack.Navigator headerMode={false}>
<Stack.Screen name="Insert Your data" component={Insert} />
<Stack.Screen name="ViewData" component={ViewData} />
</Stack.Navigator>
</NavigationContainer>
插入.js
const Insert = ({ props, navigation: { navigate } }) => {
const [enteredName, setEnteredName] = useState();
const [enteredSurname, setEnteredSurname] = useState();
const sendValues = (enteredName, enteredSurname) => {
setEnteredName(enteredName);
setEnteredSurname(enteredSurname);
navigate("ViewData", {
name: enteredSurname,
surname: enteredSurname
});
};
...
<View>
<Button
title="Submit"
onPress={() => sendValues(enteredName, enteredSurname)}
/>
ViewData.js
const ViewData = ({props, navigation: { goBack } }) => {
let name = enteredName;
console.log(name); /// I always get undefined
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Here {name}</Text>
<Button onPress={() => goBack()} title="Edit Data" />
</View>
);
};
当我提交时,我总是在控制台中未定义。我肯定在某个地方弄错了。
任何想法?
谢谢!!
解决方案
参考https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props
为屏幕使用渲染回调而不是指定组件道具:
<Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={someData} />} </Stack.Screen>
你可以这样改变
import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";
const Stack = createStackNavigator();
<NavigationContainer>
<Stack.Navigator headerMode={false}>
<Stack.Screen name="Insert Your data">
{props => (<Insert {...props} extraData={data}/>)}
<Stack.Screen name="ViewData" component={ViewData} />
</Stack.Navigator>
</NavigationContainer>
推荐阅读
- sql - 如何在 Oracle 计划作业中使用变量?
- google-sheets - 谷歌表格公式在多个条件下计数
- ruby-on-rails - 结果使用 ruby on rails 多次重复该消息
- javascript - JS过滤数组或长度未知的数组?
- python - 从第三方 API 搜索结果并将每个结果呈现到页面上:如何从每个结果中获取数据以保存到数据库?
- python - 如何使用多项式贝叶斯预测测试查询
- c++ - CMake:可以在不同 CMakeLists.txt 的目标之间重用自定义命令吗?
- reactjs - 如何通过 React-slick useRef hook 和 typescript 使用 AutoPlay 方法
- html - 定制
在 WordPress 中使用 CSS - nginx - 即使正确提供资源,NGINX URL 重写错误