react-native-router-flux Actions 如何跳转页面后不刷新页面清除传参,而且路由还在
时间: 2024-03-12 17:46:49 浏览: 234
react-native-train:我用这本书来培训我的团队,帮助他们了解如何以正确的方式构建React-native应用程序
要实现这个功能,你可以使用 `Actions.reset()` 方法。这个方法会清除路由栈并且跳转到指定的路由。在跳转的时候,你可以不传递参数,这样就可以清除传参了。
以下是一个示例代码:
```jsx
// 定义两个页面组件
import { Actions } from 'react-native-router-flux';
const Page1 = () => {
const goToPage2 = () => {
Actions.reset('page2');
};
return (
<View>
<TouchableOpacity onPress={goToPage2}>
<Text>Go to Page 2</Text>
</TouchableOpacity>
</View>
);
};
const Page2 = () => {
const goBackToPage1 = () => {
Actions.reset('page1');
};
return (
<View>
<TouchableOpacity onPress={goBackToPage1}>
<Text>Go back to Page 1</Text>
</TouchableOpacity>
</View>
);
};
// 定义路由
const App = () => (
<Router>
<Scene key="root">
<Scene key="page1" component={Page1} title="Page 1" />
<Scene key="page2" component={Page2} title="Page 2" />
</Scene>
</Router>
);
export default App;
```
在这个示例代码中,当你从 Page 1 跳转到 Page 2 的时候,你可以不传递任何参数。当你从 Page 2 返回到 Page 1 的时候,路由栈会被清除,页面会重置,并且传递的参数也会被清除。
阅读全文