Actions.‹Scene_key› срабатывает один раз, а не потом

Я работаю над реактивным приложением. Справочная информация: я создал NavigationDrawer, внутри которого есть две вкладки: a. Домашняя страница б. О нас

На домашней странице есть два тега 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. Я нажимаю на значок гамбургера в панели навигации, а затем на страницу «О нас». Он слишком успешно открывает страницу «О нас».

  3. Теперь снова, когда я открываю представление HomePage, а затем нажимаю на плитку, присутствующую в flatList HomeGrid, она не открывает для меня Scene2.

В чем проблема, которая мешает снова открыть Actions.scene2?




Ответы (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>
person mshikher    schedule 11.10.2020