[英]How to use ContextAPI in navigation drawer in React Native?
[英]React Native - How to manage the native back button with Drawer Navigation
我按照以下代碼重新創建了抽屜導航: https : //github.com/mariodev12/react-native-menu-drawer-navigator
一切正常,但現在我不知道如何處理本機按鈕返回..我想總是返回上一頁,但如果你在主頁退出應用程序按兩次。
這是我的代碼:
App.js
import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';
const Navigator = StackNavigator({
drawerStack: {screen: DrawerStack}
}, {
headerMode: 'none',
initialRouteName: 'drawerStack'
})
export default Navigator
drawerStack.js
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerScreen}
}, {
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: 'rgb(255,45,85)',
paddingLeft: 10,
paddingRight: 10
},
title: 'Home',
headerTintColor: 'white',
headerLeft: <View>
<TouchableOpacity
onPress={() => {
if (navigation.state.isDrawerOpen === false) {
navigation.dispatch(DrawerActions.openDrawer());
} else {
navigation.dispatch(DrawerActions.closeDrawer());
}
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
})
})
export default DrawerNavigation;
drawerScreen.js
import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';
const DrawerScreen = DrawerNavigator({
Home: {screen: Home},
Login: {screen: Login},
Contacts: {screen: Contacts},
News: {screen: News}
}, {
headerMode: 'none',
initialRouteName: 'Home'
})
export default DrawerScreen;
news.js“一頁示例”
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
現在,如何僅在“News.js”頁面中插入標題中的后退按鈕而不是經典菜單(DrawerStack)?
在Android中,您必須使用來自react-native的BackHandler自行處理后退按鈕操作。
首先
import { BackHandler } from 'react-native';
在ComponentDidMount中添加一個事件監聽器來監聽backpress:
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
在ComponentwillUnmount中確保刪除監聽器:
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
然后
onBackPress = () => {
//inside here do what you want with single back button
}
也可以訪問此鏈接: https : //reactnavigation.org/docs/en/drawer-based-navigation.html
如果您想使用后退按鈕返回上一個屏幕抽屜導航不適合您,您應該嘗試使用Stack Navigator。
您也需要在新聞屏幕中創建按鈕,就像這樣。
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
為了做得更好,您可以創建僅包含自定義導航選項的新屏幕。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.