Блог

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

На главной странице есть два тега сцены, один для 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>
        );
    }
}
  

Страница домашней сетки выглядит следующим образом:

 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. Теперь снова, когда я открываю просмотр домашней страницы, а затем нажимаю на плитку, присутствующую в 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>