我尝试在堆栈导航器上传递道具，这是我的代码
const MainCart = StackNavigator({
Cart: {
screen: CartScreen
},
Checkout: {
screen: COScreen
}
/* how to pass 'myprops' in this area? */
});
export default class ReactNative_RefreshControl extends Component {
constructor(props) {
super(props)
}
render() {
console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam);
return <MainCart myprops = {
this.props.myparam
}
/>;
//https://reactnavigation.org/docs/navigators/stack#Navigator-Props
}
}如何在 StackNavigator 区域传递"myprops"？
谢谢
React Navigation <5
如果你想在那个地方传递道具，你必须像这样使用它。
const MainCart = StackNavigator({
Cart: {
screen: props=> <CartScreen {...props} screenProps={other required prop}>
},
Checkout: {
screen: COScreen
}
如果您想在导航 Sagar Chavada 的解决方案时传递道具很有用
反应导航 - 5
你必须使用React Context(推荐)或渲染回调来解决这个问题。文档链接
下面的例子显示了如何使用 React 上下文
在导航器文件的父文件中创建上下文
<AppContext.Provider value={other required prop}>
<YourNavigator/>
</AppContext.Provider>
在导航器文件中
const YourNavigator = () => (
<AppStack.Navigator>
<AppScreen.Screen name={"routeName"} component={AppContextWrapper}/>
</AppStack.Navigator>
const AppContextWrapper = ({ navigation, route }) => (
<AppContext.Consumer>
{(other required prop) => (
<YourScreenComponent {...other required prop}/>
)}
</AppContext.Consumer>
);
另一个简单(不推荐)- 回调方法
<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>
注意：默认情况下，React 导航将优化应用于屏幕 组件以防止不必要的渲染。使用渲染回调 删除这些优化。因此，如果您使用渲染回调，您将 需要确保您使用 React.memo 或 React.PureComponent 为您的 筛选组件以避免性能问题。
对于那些正在寻找 React Navigation 5 的人
<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
<Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
<Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>
您可以在登录时接收初始参数.js
console.log(this.props.route.params.key)
**React-navigation v3**
在您的点击事件中，请执行以下操作：
onPressed(movie){
this.props.navigation.navigate(
'screen',
{movie: movie}
});
}
<TouchableHighlight onPress={() => this.onPressed(movie)}>
在其他屏幕中，您可以像这样设置：
export default class NavigateTo extends Component {
constructor(props){
super(props);
this.state = {
name: this.props.navigation.state.params.movie.title,
year: this.props.navigation.state.params.movie.year
}
}
电影是一个 JSON 对象，包含标题、年份、发布日期、收入、海报等。
这个用于旧导航：
onPressed(movie){
this.props.navigator.push({
id:'page2',
movie: movie
});
}
在第二个屏幕中：
this.state = {
name: this.props.movie.title,
email: this.props.movie.year
}
现在你可以看到区别了
如果这不起作用，请尝试这样做
<Button title="Second" onPress={() => navigate("MainCart",{},
{
type: "Navigate",
routeName: "Checkout",
params: {name:"Jo"}
}
)} />
检查此内容以进行嵌套堆栈导航 https://github.com/react-community/react-navigation/issues/143
就我而言，我想传递一个函数来为每个组件显示带有 conte 的 toast，我最终通过使用 screenProps 并覆盖每个组件来实现它：
export default class App extends React.Component {
constructor(props) {
super(props);
}
showToast = (text) => {
this.refs.toast.show(text, DURATION.FOREVER);
};
render() {
return <Provider store={store}>
<View style={styles.wrapper}>[
<MyAppNavigator showToast={this.showToast}/>,
<Toast ref="toast"/>
]
</View>
</Provider>;
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1
}
});
const createNavigator = (screenProps) => {
const toastWrapper = (Component, props, screenProps) => {
return <Component {...props} screenProps={screenProps}/>
};
return createStackNavigator({
login: {
screen: props => toastWrapper(LoginView, props, screenProps),
navigationOptions: () => {
return {header: null}
}
},
map: {
screen: props => toastWrapper(FieldMap, props, screenProps),
navigationOptions: () => ({
title: 'Map'
})
}
})
};
const MyAppNavigator = (props) => {
const AppNavigator = createNavigator(props);
return <AppNavigator/>
};
然后从我的组件：
this.props.screenProps.showToast("Logging you in");
假设你想通过导航通过道具传递参数myTheme。在React Navigation 5上，你可以这样做
...
const myTheme = {...}
return(
<ProfileStack.Navigator initialRouteName='ProfileWithSettings'>
<ProfileStack.Screen name={'ProfileWithSettings'}>
{props => <ProfileWithSettings {...props} theme={myTheme}/>}
</ProfileStack.Screen>
<ProfileStack.Navigator/>
);
在 ProfileWithSettings 组件上，您可以按如下方式引用 myTheme：
this.props.theme
我需要将 props 从主组件发送到 StackNavigator，然后传递给它的组件，我使用 screenProps 来做到这一点。
您的主函数应如下所示：
render() {
return <MainCart screenProps={this.props.params}
/>;
}
之后，在导航器屏幕中，您可以像这样访问它：
this.props.screenProps.params
如果您尝试从导航视图访问应用程序级别，我之前的答案成立，但是，如果您只想更改标题或类似的东西，则不必将参数传递给导航器。
一点点反应魔法：
export default class ReactNative_RefreshControl extends Component {
constructor(props) {
super(props)
}
//this function will override the navigation options specified in MainCart component
static navigationOptions = ({navigation}) => {
return {
headerTitle: navigation.state.params.name,
headerRight: <Button onPress={navigation.state.params.onClick}/>
};
};
componentDidMount() {
this.props.navigation.setParams({
name: "name",
onClick: this.onClick
});
}
...
}
用于将参数从一个堆栈导航器的子级传递到另一个堆栈的子级在 v5反应导航中
导航器const SecondStackNavigator = props => {
const stackOptions = {};
return (
<Stack.Navigator headerMode={"none"} screenOptions={stackOptions}>
<Stack.Screen name={"market"}>{() => <SecondScreen {...props} />}
//Here the props is passed with spread operator to children
</Stack.Screen>
); };
对于正在寻找反应导航 6.x解决方案的每个人：
根据反应导航文档：
将参数传递到上一个屏幕
参数不仅可用于将某些数据传递到新屏幕，而且对于将数据传递到上一个屏幕也很有用。例如，假设您有一个带有"创建帖子"按钮的屏幕，并且"创建帖子"按钮会打开一个新屏幕来创建帖子。创建帖子后，您希望将帖子的数据传递回上一个屏幕。
为此，您可以使用导航方法，如果屏幕已经存在，该方法的作用类似于goBack。您可以使用 navigate 传递参数以将数据传回：
function HomeScreen({ navigation, route }) {
React.useEffect(() => {
if (route.params?.post) {
// Post updated, do something with `route.params.post`
// For example, send the post to the server
}
}, [route.params?.post]);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Create post"
onPress={() => navigation.navigate('CreatePost')}
/>
<Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
</View>
);
}
function CreatePostScreen({ navigation, route }) {
const [postText, setPostText] = React.useState('');
return (
<>
<TextInput
multiline
placeholder="What's on your mind?"
style={{ height: 200, padding: 10, backgroundColor: 'white' }}
value={postText}
onChangeText={setPostText}
/>
<Button
title="Done"
onPress={() => {
// Pass and merge params back to home screen
navigation.navigate({
name: 'Home',
params: { post: postText },
merge: true,
});
}}
/>
</>
);
}