反应本机导航

Question

我正在制作一个应用程序，其中我使用了抽屉导航器，并在其中嵌套了一个堆栈导航器。抽屉包含屏幕主页，产品，简介等。当我在主屏幕中使用堆栈导航器切换到 3 个不同的屏幕时产品->项目说明 .问题 1：如果我通过主页转到产品或项目描述。如果我在产品或项目描述中打开抽屉，我无法从抽屉点击 HOME 回到家。单击抽屉菜单上的其他选项，我可以切换到差异屏幕。

问题2：我有一个来自"导航栏原生"的导航栏，我在每个组件中都使用它，即主页，产品，项目描述，购物车等。你能帮我与 redux 链接，这样我就可以在单击其图标即 CART 和搜索屏幕时打开不同的屏幕。

抽屉代码 ：

 const RootDrawer = DrawerNavigator({
 Home: {
   screen: HomeScreen,
   style :{backgroundColor:'blue'},
 },
 Profile: {
   screen: ProfileScreen,
 },
 Products: {
   screen: Products,
 },
 Cart: {
   screen: Cart,
 },
});
export default RootDrawer;

首页屏幕代码 ：

 class Home extends React.Component {
      constructor(props){
        super(props) ;
        this.openUp = this.openUp.bind(this)
      }
      openUp(){
         this.props.navigation.navigate('DrawerOpen'); 
    // open drawer passed to all components to open Drawer from hamburger 
    //iconpresent at NAVbar
       }

      render() {
            return (
                  <SimpleApp key={1} screenProps={this.openUp} />
         );
      }
    }


const SimpleApp = StackNavigator(
   {
  drwlyout: { screen: DrawerLayoutMain ,      navigationOptions:({navigation}) => ({ header: false }  )              },
  prodlyout: { screen: Products ,    navigationOptions:({navigation}) => ({ header: false })},
  itemdsclyout: { screen: ItemDescription ,    navigationOptions:({navigation}) => ({ header: false })},
  navbarlayout: { screen: NavBarComponent ,    navigationOptions:({navigation}) => ({ header: false })},

  }   );
function mapDispatchtoProps(dispatch){
   return  bindActionCreators({getDataFirebase:getDataFirebase},dispatch);
}
export default connect(null,mapDispatchtoProps)(Home);

Answer 1

对于您的第一个问题，您将需要一个导航缩减器，有关如何使用 React-Navigation 实现 Redux 的基本描述可以在这里找到当您必须侦听化简器内部的特定导航操作时。例如，您的抽屉导航器如下所示：

const nav = (state = INITIAL_NAV_STATE, action) => {
let nextState;
switch (action.type) {
  case REHYDRATE:
    // if you're using redux-persist
  case 'Main': // where 'Main' is your StackNavigator
    nextState = AppNavigator.router.getStateForAction(
      NavigationActions.navigate({ routeName: 'Home' }),
      state
    );
    break;

请参阅">路由名称"，这是主屏幕的名称。因此，您的根或主抽屉导航器应如下所示：

const routeConfig = {
  Main: {
    screen: MainStackNavigator,
    navigationOptions: {
      drawerIcon: ({ tintColor }) => (
        <Icon name="a006_start" size={28} color={tintColor} />
      ),
    drawerLockMode: 'locked-closed'
  }
},
.... additional Code ....
.... like navigationOptions etc. ....
const MainDrawerNavigator = DrawerNavigator(routeConfig, routeOptions);
export default MainDrawerNavigator;

很抱歉我还没有使用"导航栏本机"，但我想如果您像这样连接您的 redux 配置，您可以收听特定的导航操作。然后可以在导航减速器内部进行处理。