web-dev-qa-db-ja.com

ヘッダーがReact-Navigation-Drawer React-Nativeに表示されていません

Reactナビゲーションライブラリからreact-navigation-drawerを実装しています。しかしヘッダーに関連する問題に直面しています。ヘッダバーはいずれかの画面に表示されていません。

これは私のApp.jsです

import React from "react";
import { StyleSheet, ScrollView, View } from "react-native";
//import DrawerNavigator from "./navigation/DrawerNavigator";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import Home from "./components/home";
import Contact from "./components/contact";

const WIDTH = Dimensions.get("window").width;
const RouteConfigs = {
  Home: {
    screen: Home
  },
  Contact: {
    screen: Contact
  }
};
const DrawerNavigatorConfig = {
  drawerWidth: WIDTH * 0.75,
  drawerType: "both",
  initialRouteName: "Home"
};
const DrawerNavigator = createDrawerNavigator(
  RouteConfigs,
  DrawerNavigatorConfig
);

const MyApp = createAppContainer(DrawerNavigator);

export default class App extends React.Component {
  render() {
    return <MyApp />;
  }
}

そしてこれは私のhome screenです

import React, { Component } from "react";
import { View, Image, Text, StyleSheet, ScrollView } from "react-native";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faTruck, faHome } from "@fortawesome/free-solid-svg-icons";

class Home extends Component {
  static navigationOptions = {
    headerTitle: "Home",
    drawerIcon: ({ tintColor }) => <FontAwesomeIcon size={25} icon={faHome} />
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    flexDirection: "column"
  },
  icon: {
    width: 24,
    height: 24
  }
});

export default Home;

誰かが私を助けてくれることができます。前もって感謝します！！！

react-nativereact-navigationreact-navigation-drawer
9
Alok Mali

@HongDeveloperこれはReact Navigation 5の簡単なソリューションです。

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: "Profile"}} name="Profile" component={Profile} />
      <Stack.Screen options={{title: "Settings"}} name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
 _

ネストされたナビゲータの画面にナビゲーションについて検索できます docs と この例をスナックで試すことができます

2
Jimmy Sorza

返信が遅くなりますが、私は以下のコードでそれをしました。

私は各画面に別々のスタックナビゲータを作成し、その後、引き出しナビゲータのすべてのスタックナビゲータを追加しました。

良いことは完全にカスタマイズされています。

以下のコードを見てください。

const WIDTH = Dimensions.get('window').width;

  const HomeNavigator = createStackNavigator(
    {
      Home: Home
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: 'Knowledge Woledge',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faBars}
                onPress={() => navigation.openDrawer()}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );

  const DetailNavigator = createStackNavigator(
    {
      PostDetail: PostDetail
    },
    {
      defaultNavigationOptions: ({ navigation }) => {
        return {
          headerStyle: {
            backgroundColor: '#1e89f4'
          },
          headerTitle: () => {
            return (
              <Text
                style={{
                  color: '#fff',
                  fontWeight: 'bold',
                  textAlign: 'center',
                  flex: 1,
                  fontSize: 20
                }}
              >
                {navigation.getParam('headerTitle')}
              </Text>
            );
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1
          },
          headerLeft: (
            <View style={{ paddingLeft: 13 }}>
              <FontAwesomeIcon
                size={25}
                color='#fff'
                icon={faArrowLeft}
                onPress={() => navigation.goBack(null)}
              />
            </View>
          ),
          headerRight: <View />
        };
      }
    }
  );
 _

Const.にこれを割り当てた

const RouteConfigs = {
    Home: {
      screen: HomeNavigator,
      navigationOptions: {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
          <FontAwesomeIcon size={20} color={tintColor} icon={faHome} />
        )
      }
    },
    Detail: {
      screen: DetailNavigator,
      navigationOptions: {
        drawerLabel: () => {
          return null;
        }
      }
    }
  };
 _

そして最後に、これで引き出しナビゲータを作成します。

const DrawerNavigatorConfig = {
    drawerWidth: WIDTH * 0.75,
    drawerType: 'both',
    initialRouteName: 'Home'
  };
  const DrawerNavigator = createDrawerNavigator(
    RouteConfigs,
    DrawerNavigatorConfig
  );

  const Stacks = createAppContainer(DrawerNavigator);

  export default Stacks;
 _
0
Alok Mali