Ящик встроенной навигации React не закрывает заголовок в моем приложении

Я новичок в реагировании на родную разработку, но у меня есть некоторые требования к ящику для реагирования. Я хочу отобразить панель навигации сверху экрана, но она отображается ниже на панели инструментов. Это комбинация экранов стопки и ящика. Ниже приведен мой код в App.js.

function App() {
  SplashScreen.hide()
  return (
    <NavigationContainer>
      {/* headerMode='float' */}
      <Stack.Navigator initialRouteName='Login' >
        <Stack.Screen name="Login" component={LoginScreen}
          options={{ headerShown: false }} />
        {/* <Stack.Screen name="Home" component={HomeScreen} /> */}
        <Stack.Screen name="DrawerScreens" component={DrawerScreens} 
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'},
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} />

        <Stack.Screen name="Dashboard" component={Dashboard} 
            options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} />
</Stack.Navigator>
</NavigationContainer>

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

function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    // <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float" >
    {/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */}
      {/* options={{ drawerLabel: 'Updates' }} */}

      <Drawer.Screen name="LandingScreen" component={LandingScreen}
        initialParams={{ token: route.params.token }}/>
  );
}

Функция CustomDrawer содержит список элементов меню, которые являются динамическими, и NestedMenuView позаботится об этом.

function CustomDrawerContent(props) {
  return (
 <SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}>

      <NestedMenuView navObj={props.navigation} />

      </SafeAreaView>       

  );
};

Пожалуйста, проверьте здесь эталонное изображение, я хочу, чтобы левое меню начиналось с заголовка, а не снизу с заголовка

Для меня комбинация стекол и ящиков. Заранее спасибо.


react-native android react-navigation react-navigation-drawer react-navigation-stack
person malli    schedule 12.05.2020    source источник
comment
Я ничего не вижу в вашем коде, но если это может помочь, я делаю ящик с реактивной навигацией v5, вы можете проверить код: github.com/samuel3105/react-native-navigation   -  person samuel    schedule 12.05.2020

Ответы (3)


arrow_upward
0
arrow_downward

Я не думаю, что проблема заключается в Stack Navigator или компонентах Screen;

Если вы используете последнюю версию @ react-navigation / drawer после v5 (у меня 5.6.3), рекомендуется использовать встроенные оболочки при создании настраиваемого ящика.

const Drawer = createDrawerNavigator();

const Menu = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => {}} />
    </DrawerContentScrollView>
  );
};

export default function MyDrawer() {
  return (
    <Drawer.Navigator
      initialRouteName="Tabs"
      drawerContent={(props) => <Menu {...props} />}
      edgeWidth={100}
      drawerContentOptions={{
        activeTintColor: Colors.accentColor,
        labelStyle: {
          fontFamily: 'open-sans',
        },
      }}
    >
      <Drawer.Screen...
    </Drawer.Navigator>
  );

Вы также можете выйти из режима прокрутки и создать собственный пользовательский интерфейс следующим образом:


const contentOptions = {
    activeBackgroundColor: '#dbdbdb',
    activeLabelStyle: {
        fontSize: 16,
        color: 'black',
        fontFamily: 'roboto'
    },
    labelStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: intenseGrey,
        fontFamily: 'roboto'
    }
};

    return (
        <View
            style={{
                display: 'flex',
                flexDirection: 'column',
                flexGrow: 1
            }}
        >
            <SafeAreaView style={{ flex: 1, paddingBottom: 0 }}>
                <View style={{
                    backgroundColor: '#dbdbdb',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    flexGrow: 1}}
                 >
                    <View>
                        <DrawerItemList {...props} {...contentOptions} />
                    </View>
                </View>
            </SafeAreaView>
        </View>
    );
person Bence Rozsa    schedule 12.05.2020
comment
Спасибо MR.Bence Rozsa за быстрый ответ. Если у меня есть одноуровневый список, я думаю, вышеуказанное решение сработает. Но я хочу, чтобы список меню был многоуровневым, значит, когда я нажимаю на элемент, он открывает другой список внутри него до двух уровней. Для этой цели я использовал "NestedMenuView" .. Не могли бы вы посмотреть таким образом и сообщить мне, если у вас есть другие .. - person malli; 12.05.2020
comment
Конечно, теперь я понимаю. Я не использовал многоуровневую навигацию по выдвижным ящикам, хотя @ gie3d определенно прав насчет использования ящика наверху и размещения всего, что находится под ним. - person Bence Rozsa; 13.05.2020

arrow_upward
0
arrow_downward

Я думаю, что причина, по которой Drawer не покрывается, заключается в том, что вы помещаете навигацию Drawer в свою навигацию по стеку.

Ваш

Stack
   Drawer

Чтобы исправить это, вам нужно изменить порядок

Drawer
    Stack

Например (или вы могли видеть здесь мою закуску: https://snack.expo.io/@gie3d/d25aca)

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} options={({navigation}) => ({
      title: "Home",
      headerLeft: () => (
          <Ionicons
            name={'md-menu'}
            size={24}
            style={{ marginLeft: 10 }}
            onPress={() =>
              navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
        ),
    })} />
  </Stack.Navigator>
);

const Home = () => {
  return (
  <View>
    <Text>This is Home</Text>
  </View>
)}

export default () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="HomeStack">
        <Drawer.Screen name="HomeStack" component={HomeStack} />
        <Drawer.Screen name="HomeNoStack" component={Home} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
person gie3d    schedule 13.05.2020
comment
Спасибо за быстрый ответ MR.gie3d. Я использовал вашу технику с двумя экранами входа в систему, с целевыми экранами, но с отображением панели навигации на экране входа в систему. Как я могу избежать отображения этого на экране входа в систему. Пожалуйста, помогите мне .. - person malli; 13.05.2020
comment
обновил код в app.js: ‹NavigationContainer› ‹Drawer.Navigator initialRouteName = Login› ‹Drawer.Screen name = LandingScreen component = {LandingScreen} /› {/ * ‹Drawer.Screen name = DrawerScreens component = {DrawerScreens} /› * /} ‹Drawer.Screen name = Login component = {LoginScreen} navigationOptions = {{gesturesEnabled: false,}} options = {{headerShown: false, gesturesEnabled: false}} /› ‹/Drawer.Navigator› - person malli; 13.05.2020
comment
Думаю, это то, что вы ищете, reactnavigation.org/docs/auth-flow. Идея состоит в том, чтобы иметь отдельные навигаторы для входа в систему и других после входа в систему. - person gie3d; 13.05.2020
comment
Не уверен, но я хочу, чтобы это работало, как показано ниже: 1. Экран входа в систему не отображает панель навигации 2. После входа в систему он должен отображаться в верхней части экрана. - person malli; 13.05.2020
comment
Мне нужна комбинация обоих экранов даже после входа в систему @ gie3d. - person malli; 13.05.2020
comment
Да, вы можете увидеть, как реализовать, по ссылке, которую я отправил вам выше (поток аутентификации) - person gie3d; 13.05.2020
comment
Как я могу указать в app.js экраны стека и ящика после входа в систему? - person malli; 13.05.2020

arrow_upward
0
arrow_downward

Следующие стеки созданы и вызывают эти стеки из экранов ящиков.

const LandingStack = ({ route, navigation }) => (
  <Stack.Navigator>
    <Stack.Screen name="LandingScreen" component={LandingScreen} options={({navigation}) => ({
      headerTitle: 'Home',
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);

const TicketingStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="TicketingDashboard" component={TicketingDashboard} options={({route, navigation}) => ({
      headerTitle: route.params.type,
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);


function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="screen">


      {/* options={{ drawerLabel: 'Updates' }} */}

      {/* <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} /> */}

      <Drawer.Screen name="LandingStack" component={LandingStack}

        initialParams={{ token: route.params.token }}/>

      <Drawer.Screen name="HomeStack" component={HomeStack}
        initialParams={{ token: route.params.token }} />
    </Drawer.Navigator>

    </SafeAreaProvider>
  );
}

И я удалил часть заголовка из функции App и, наконец, выглядит так в App.js

 <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={{ headerShown: false }} />
person malli    schedule 19.05.2020
comment
Мой ответ помогает тем, кто использует ту же архитектуру и сталкивается с одной и той же проблемой. Спасибо всем за вклад в решение проблемы. - person malli; 19.05.2020