操作<Scene_key>仅工作一次，之后不工作

问题描述

我正在开发本机应用程序。 背景：我创建了一个NavigationDrawer，其中有两个选项卡。主页b。关于我们

主页有两个Scene标签，一个用于Scene1，另一个用于Scene2

“关于我们”页面中只有一个场景。

NavigationDrawer页面如下：

export default function NavigationDrawer() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

function MyDrawer() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="HomePage" component={HomePage} />
        <Drawer.Screen name="AboutUs" component={aboutUsPage} />
    </Drawer.Navigator>
  );
}

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

function HomePage({ navigation }) {
  return (
    <Router >
        <Scene key ="root">
            <Scene key = "scene1" title = "scene1" component = { scene1 } initial = {true} renderLeftButton={navBarButton(navigation)}/>
            <Scene key = "scene2" title = "scene2" component = { scene2 }   />
        </Scene>
    </Router>
  );
}

const navBarButton = (navigation) => {
    return(
      <TouchableOpacity>
        <Icon 
            name='three-bars' 
            size={30} 
            color='#000' 
            onPress={() => navigation.dispatch(DrawerActions.openDrawer()))}
            />
      </TouchableOpacity>
    );  
}

主页看起来像这样：

export default class Home extends Component {
render() {
        return (
            <View style={styles.container}>
                <HomeGrid />
            </View>
        );
    }
}

HomeGrid页面如下：

export class HomeGrid extends Component {

    onGridImagepressed() 
    {
      console.log("pressed");
      Actions.scene2();
      console.log("pressedAgain");
    }

    render(){
      return (
       <View style = {styles.parentViewStyle}>
          <FlatList
            data={ homeGridData }
            renderItem={({item}) => (
              <TouchableOpacity   style = {{ backgroundColor: item.backgroundColor,height:150}} onPress={ this.onGridImagepressed }>
                <View style={styles.itemContainer}>            
                      <Text style = { styles.textStyle }>
                        {item.value}
                      </Text> 
                </View>
              </TouchableOpacity>
            )}
            keyExtractor={item => item.id}
            numColumns={numColumns} />
       </View>

          
      );
    }
  }

重现该问题的步骤：

1. 我刷新页面，然后单击主页中显示的“网格”图标，它将为我打开Scene2视图。

2. 我单击导航抽屉汉堡包图标，然后单击“关于我们”页面。太成功地打开AboutUs页面。

3. 现在再次打开HomePage视图，然后单击HomeGrid的flatList中存在的图块，它不会为我打开Scene2。

什么是阻止Actions.scene2再次打开的问题？

解决方法

通过使用“ react-native-router-flux”库以这种方式放置导航抽屉来解决此问题。

<Router>
              <Scene key ="root" >
                    <Scene key ="mainContainer" >
                    <Drawer 
                          drawerIcon={<Icon 
                            name='three-bars' 
                            size={30} 
                            color='#000' />}
                          drawerPosition="left"
                          hideNavBar
                          contentComponent={NavigationMenu}>
                      
                          <Scene key = "screen1" title = "Screen1" component = { Screen1 } initial = {true} />
                          <Scene key = "screen2" title = "Screen2" component = { Screen2 } />
                          </Drawer>
                     
                    </Scene>
              
              <Scene key = "screen3" title = "Screen3" component = { Screen3 } backTitle= "Screen1"/>
              <Scene key = "screen4" title = "Screen4" component = { Screen4 } />
              
              </Scene>

        </Router>