我想從MenuScreen.js傳遞一個參數給ProfileScreen.js。我是React Native和Redux的新手。使用react-navigation進行導航,我可以用按鈕推到新屏幕。在Redux + React Native + react-navigator中傳遞參數
使用
按鈕onPress = {()=>調度(NavigationActions.navigate({routeName: '個人資料',則params:{用戶: '巴茲'}}))} 標題=「資料「/>
我能夠通過參數,但我不知道如何訪問它在配置文件屏幕上。
在ProfileScreen.js使用
this.props.navigation.state.params
是給一個錯誤,
this.props.navigation
未定義。
下面是代碼,
MainScreen.js
const MainScreen = ({ dispatch }) => {
return (
<View>
<Button
onPress={() =>
dispatch(NavigationActions.navigate({ routeName: 'Profile', params: { user: 'baz' } }))}
title="Profile"
/>
</View>
);
};
MainScreen.propTypes = {
dispatch: PropTypes.func.isRequired,
};
MainScreen.navigationOptions = {
title: 'Main',
};
const mapStateToProps = state => ({
});
export default connect(mapStateToProps)(MainScreen);
ProfileScreen.js
const params = this.props.navigation.state.params;
const ProfileScreen =() => (
<View style={styles.container}>
<Text style={styles.welcome}>
{params}
</Text>
</View>
);
ProfileScreen.navigationOptions = {
title: 'Profile',
};
export default ProfileScreen;
index.reducer.js
個import { AppNavigator } from '../navigators/AppNavigator';
const initialNavState = AppNavigator.router.getStateForAction(
AppNavigator.router.getActionForPathAndParams('Main')
);
function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
default:
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}
return nextState || state;
}
const AppReducer = combineReducers({
nav,
});
export default AppReducer;
AppNavigator.js
import MainScreen from '../components/MainScreen';
import MainScreen from '../components/MainScreen';
import ProfileScreen from '../components/ProfileScreen';
export const AppNavigator = StackNavigator({
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
});
const AppWithNavigationState = ({ dispatch, nav }) => (
<AppNavigator navigation={addNavigationHelpers({ dispatch, state:
nav })} />
);
AppWithNavigationState.propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(AppWithNavigationState);
index.ios.js
class NavChecks extends React.Component {
store = createStore(AppReducer);
render() {
return (
<Provider store={this.store}>
<AppWithNavigationState />
</Provider>
);
}
}
AppRegistry.registerComponent('NavChecks',() => NavChecks);
export default NavChecks;
你釘了它!有效!謝謝mradziwon!我剛剛開始使用React-Native,在您的許可下,您是否可以爲我提供一種與您聯繫的方式,以便當我再次陷入困境時可以提出一些問題以尋求幫助?先生,再次感謝! – user7181763