反应原生导航-Java 学习之路

我正在制作一个应用程序，其中我使用了Drawer Navigator并在其中嵌套了一个Stack Navigator . 抽屉包含屏幕HOME，PRODUCTS，Profile等 . 我在主屏幕内使用Stack导航器切换到3个不同的屏幕Products-> ItemDescription . 问题1：如果我通过Home转到产品或项目描述 . 如果我在产品或ItemDescription中打开抽屉，我不能回到家里从抽屉单击HOME .WHile点击抽屉菜单上的其他选项我可以切换到差异屏幕 .

问题2：我有一个来自'navbar-native'的导航栏，我在每个组件中使用它，包括HOME，PRODUCTS，ItemDescription，Cart等 . 你能帮我链接redux以便我可以点击它的ICON打开不同的屏幕即CART和SEARCH屏幕 .

抽屉代码：

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

export default RootDrawer;

HomeScreenCode：

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);

1 回答

对于您的第一个问题，您将需要一个导航减速器，可以找到如何使用React-Navigation实现Redux的基本描述here当您必须侦听减速器内部的特定导航操作时 . 例如，您的DrawerNavigator看起来像这样：

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;

请参阅“ routeName ”，这是主屏幕的名称 . 因此，您的根或主抽屉导航器应如下所示：

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;

对不起，我还没有使用'navbar-native'，但我想如果你像这样连接你的redux配置，你可以听取特定的导航动作 . 然后可以在导航减速器内部处理 .

回复于 2024-05-07T15:06:06+08:00

反应原生导航

1 回答

相关问题