在Redux + React Native + react-navigator中傳遞參數

我想從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;

來源

2017-09-04 user7181763

-1

嘗試通過道具來ProfileScreen：

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

來源

2017-09-04 15:15:44 mradziwon

你釘了它！有效！謝謝mradziwon！我剛剛開始使用React-Native，在您的許可下，您是否可以爲我提供一種與您聯繫的方式，以便當我再次陷入困境時可以提出一些問題以尋求幫助？先生，再次感謝！ – user7181763

試圖通過道具ProfileScreen 。在我看來，使用react-native-router-flux進行導航更靈活，我認爲你可以在導航到其他頁面時將參數作爲道具傳遞

來源

2017-12-28 12:11:21

在Redux + React Native + react-navigator中傳遞參數

回答

相關問題