Question

我已经按照simple-react-full-stack在屏幕上创建了一个抽屉，问题是它没有打开，甚至没有给我任何错误，我的项目结构就像我在做反应导航一样，也抽屉在单独的js文件中，甚至我在顶部添加了一个按钮，但是onPressing按钮没有任何反应，甚至没有被按下（尝试过Alert），请帮忙！我还使用了react-navigation / stack并将其用于我的app.js中，并且工作正常。这是我的主屏幕，在该屏幕的顶部添加了一个按钮以打开抽屉：

  return (
      <View style={styles.container}>
          <TouchableHighlight style={styles.drawer} onPress={() => this.props.navigation.openDrawer()}>
      <Image  source={require('../../assets/drawer.png')}/>
</TouchableHighlight> //This TouchableHighligh onPress is not doing anything
        <Text
          style={{
            padding: 16,
            fontSize: 20,
            color:'#1589FF',
            textAlign: 'center',
            fontWeight: 'bold',
          }}>
          Drawer Demo
        </Text>
        <Timeline
          style={styles.list}
          data={this.data}
          circleColor="rgba(0,0,0,0)"
          lineColor="rgb(45,156,219)"
        />
      </View>
    );
  }
}

这是我的抽屉，必须在按下或向左滑动屏幕时显示：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  DrawerItem,
  DrawerContentScrollView,
} from '@react-navigation/drawer';

export function DrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <View
        style={
          styles.drawerContent
        }
      >
        <View style={styles.userInfoSection}>
          <View style={styles.row}>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                202
              </Paragraph>
              <Caption style={styles.caption}>Following</Caption>
            </View>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                159
              </Paragraph>
              <Caption style={styles.caption}>Followers</Caption>
            </View>
          </View>
        </View>
        </Drawer.Section>
      </View>
    </DrawerContentScrollView>
  );
}

这是我在其中设置抽屉导航规则的屏幕：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import { NavigationContainer } from '@react-navigation/native';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
    render(){
    return (
        <NavigationContainer>
        <Drawer.Navigator drawerContent={() => <DrawerContent />}>
        <Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
      </Drawer.Navigator>
      </NavigationContainer>
    );
  }
  }

抽屉未打开React Native Navigation 5

0 个答案: