Reducx + Resact Native + react-navigator로 매개 변수 전달

Reducx + Resact Native + react-navigator로 매개 변수 전달

MenuScreen.js의 파라미터를 ProfileScreen.js로 전달하려고 한다.나는 React Native와 Redex를 처음 접한다.내비게이션에 리액션 네비게이션으로 버튼 하나로 새 화면을 누를 수 있다.

사용.

버튼 onPress={() => dispatch(NavigationActions.navigate)({routeName: 'Profile', params: { user: 'baz' }}}) 제목="Profile" />

나는 매개 변수를 전달할 수 있지만 프로필 화면에서 어떻게 접속할 수 있는지 모르겠다.

사용.

이.190.20.state.params.

ProfileScreen.js에서 다음 오류가 발생함

this.csv.property.properties

정의되지 않았다.

아래는 코드,

메인스크린.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;

인덱스.저감기.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);

색인.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; 

ProfileScreen으로 소품을 전달해 보십시오.내 관점에서는 보다 유연한 탐색에 react-native-router-flux를 사용하는데, 나는 당신이 다른 페이지로 이동하는 동안 소품으로 매개변수를 전달할 수 있다고 생각한다.

나도 같은 문제를 가지고 있었고 반응 탐색에 내비게이션으로 해결했다.

import { withNavigation } from 'react-navigation';
export default connect(mapStateToProps, mapDispatchToProps)(withNavigation(MyComponent));

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

에 소품을 전달해 보십시오.ProfileScreen:

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

참조URL: https://stackoverflow.com/questions/46038749/passing-params-in-redux-react-native-react-navigator