Question

我正在尝试将MenuScreen.js中的参数传递给ProfileScreen.js。我是React Native和Redux的新手。使用反应导航进行导航，我可以使用按钮推送到新屏幕。

使用

按钮onPress = {（）=＆gt; dispatch（NavigationActions.navigate（{routeName：＆＃39; Profile＆＃39;，params：{user：＆＃39; baz＆＃39;}}））} 标题=＆＃34;简介＆＃34; /＆GT;

我能够通过参数，但我不知道如何在配置文件屏幕上访问它。

使用

this.props.navigation.state.params

ProfileScreen.js 中的

发出错误

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;

Answer 1

尝试将props传递给ProfileScreen。在我的观点中使用react-native-router-flux进行导航，这更灵活我认为你可以在导航到另一页时将参数作为道具传递

Answer 2

我遇到了同样的问题，并在react-navigation中使用withNavigation解决了这个问题。

while current_savings < down_payment:
    current_savings = (current_savings*0.04)/12 + (annual_salary/12)*portion_saved
    months += 1
print('Number of months ', months)

https://reactnavigation.org/docs/en/with-navigation.html

Answer 3

尝试将道具传递给ProfileScreen：

const ProfileScreen = (props) => (
  <View style={styles.container}>
  <Text style={styles.welcome}>
   {props.navigation.state.params.user}
  </Text>
  </View>
);

在Redux + React Native + react-navigator中传递参数

3 个答案: