react-native - 行动。工作一次而不是之后

Question

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

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

AboutUs 页面中只有一个场景。

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 页面。它打开 AboutUs 页面太成功了。

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

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

标签： react-nativereact-navigationreact-native-router-fluxreact-navigation-drawer

Answer 1

通过使用“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>