Question

我有一个React应用程序，其中我已经用createDrawernavigator实现了createStackNavigator。当我触摸按钮时，抽屉打开。效果很好，但是在打开抽屉后以及我点击屏幕背景或从右向左滑动时，抽屉没有关闭。

代码：

import * as React from "react";
import { createStackNavigator, createSwitchNavigator, createAppContainer, createDrawerNavigator, DrawerNavigator, Navigation, DrawerActions } from "react-navigation";
import Login from "./screens/LoginScreen/Login";
import DefaultPreference from 'react-native-default-preference';
import Icon from "./components/Icons";
import { View, Dimensions, StyleSheet, Platform, TouchableOpacity, Text, AppRegistry } from 'react-native';
import DrawerScreen from './screens/DrawerScreen'
import color from "./styles/color"
import Machines from "./screens/MachineListScreen/Machines";
import MachineInfo from './screens/MachineInfo/MachineInfo'
import Machine from './screens/MachineInfo/Machine'
// import Devices from "./screens/DeviceListScreen/Devices";
// import WifiConfigs from "./screens/WiFiConfigScreen/WiFiConfig";
import AuthLoading from './screens/AuthLoading'
import ChangePassword from './screens/ChangePasswordScreen/ChangePassword'
import ForgotPassword from './screens/ChangePasswordScreen/ForgotPassword'
import Analyze from './screens/Analyze/AnalyzeScreen'
import Report from './screens/Reports/Report'
import Search from 'react-native-search-box'
import About from './screens/About/About'
// import Search from 'react-native-search-box';
var width = Dimensions.get('window').width
var customerName = ''
DefaultPreference.get('customerName').then((val) => {
  customerName = val
})
const MachineStack = createStackNavigator({
  Machines: {
    screen: Machines,
    navigationOptions: ({ navigation, screenProps }) => ({
      headerTitle: () => {
        return <View style={{ width: width * 0.8, alignSelf: 'center', marginTop: 2 }}>
          <Search
            backgroundColor={color.primary}
            deleteButtonStyle={{ fontSize: 20 }}
            placeholder={'Search in ' + customerName}
            onDelete={() => navigation.state.routes[navigation.state.index].params.handleCancel()}
            onCancel={() => navigation.state.routes[navigation.state.index].params.handleCancel()}
            onChangeText={(text) => navigation.state.routes[navigation.state.index].params.handleChange(text)}
          />
        </View>
      },
      headerLeft:
      <TouchableOpacity onPress={() => { navigation.dispatch(DrawerActions.toggleDrawer()) }}>
        <MenuImage navigation={navigation} />
      </TouchableOpacity>,
    }),

  },
  Machine: { screen: Machine },
  MachineInfo: { screen: MachineInfo },
  Analyze: { screen: Analyze },
  Report: { screen: Report },
  PasswordScreen: { screen: ChangePassword },
  AboutScreen: { screen: About }
},
  {
    navigationOptions: ({ navigation }) => ({
      // Title to appear in status bar
      headerStyle: {
        elevation: 0,
        backgroundColor: "#2196F3"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    })
  })

// Creates drawernavigator.
const Drawer = createDrawerNavigator({
  MachineStack: {
    screen: MachineStack
  }
}, {
    initialRouteName: 'MachineStack',
    contentComponent: DrawerScreen,
  }
);

const MenuImage = ({ navigation }) => {
  if (!navigation.state.isDrawerOpen) {
    return <Icon style={styles.drawerIcn} name='menu' size={24} />
  } else {
    return <Icon style={styles.drawerIcn} name='arrow-back' size={24} />
  }
}

// stacknavigator
const AuthStack = createStackNavigator({ Login: Login, ChangePassword: ChangePassword, ForgotPassword: ForgotPassword });

// switchnavigator.
const AppNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    App: Drawer,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const styles = StyleSheet.create({
  drawerIcn: {
    color: '#fff',
    padding: 10
  }
})
export default createAppContainer(AppNavigator);

Answer 1

尝试将左侧的组件代码部分更改为此：

    let inputText = "Aptitude tests English skills relevant to your requirements. It enables an organisation / institution to assess all four English skills – reading, writing, listening and speaking together with the core mandatory component (grammar and vocabulary) or test just one skill, e.g. reading."
    let labelWidth = UIScreen.main.bounds.width
    var resultArray:[String] = []
    var readerString = ""
    for i in 0 ..< inputText.count
    {

        readerString += inputText[i]
        //Check if overflowing boundries and wrapping for new line
        if readerString.widthOfString(usingFont: UIFont.systemFont(ofSize: 14)) >= labelWidth {
            resultArray.append(readerString)
            readerString = ""
        }
 }

此外，我相信您在navigationOptions: ({ navigation }) => { return { . . . headerLeft: ( <TouchableOpacity onPress={() => { navigation.dispatch(DrawerActions.toggleDrawer()) }}> <MenuImage navigation={navigation} /> </TouchableOpacity> ), } },的开头缺少return {

希望有帮助。

此处有更多信息：https://reactnavigation.org/docs/en/header-buttons.html

Answer 2

这对我有用。

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

React Native：点击屏幕背景时抽屉不会关闭

2 个答案: