Question

在我的React本机项目中，我正在使用一个自定义抽屉导航，在那个抽屉中，我正在使用三个项目-首页，所有注释，做笔记。因此，这是自定义的抽屉式导航，我想在底部使用一个标题和文本。文本组件将是可触摸的，并且在按下文本后，屏幕将导航到另一个。

这是我的Drawer导航类的代码-

let user_email ='', user_first_name='';

class NavigationDrawerStructure extends React.Component {
  static navigationOptions = {
    header: null ,
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };

  render() {
    return (

      <View style={{ flexDirection: 'row' }}>

        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
         <Icon name='menu'/>
        </TouchableOpacity>
      </View>
    );
  }
}

const CustomDrawerContentComponent = (props) => (

  <View style={{backgroundColor:"#ffff", height:'100%'}}>

       <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
       <Body style={styles.drawerBody}>
         <Image
           style={styles.drawerImage}
           source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
         />
         <View style={styles.drawerHeaderText}>
           <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
           <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
         </View>

       </Body>
       </ImageBackground>

      <DrawerItems {...props} />

      <TouchableOpacity onPress={
        this.props.navigation.navigate('MakeNote')
      }>
        <Text>Screen 1</Text>
      </TouchableOpacity>

   </View>

 );


const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: NoteMeHome,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),

  },
  ScreenInternal: {
    screen: ScreenInternal,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen With Navigation Drawer',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: MakeNote,
    navigationOptions: ({ navigation }) => ({
      title: 'Create Note',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: AllNotes,
    navigationOptions: ({ navigation }) => ({
      title: 'All Notes',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Drawer = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={25}

        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Create Note',
      drawerIcon: (
        <Image  source={require('../assets/icon_create_note.png')}  
        style={{height:25, width:25,}}

        />
      )
    },
  },

  Screen3: {
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'All Notes',
      drawerIcon: (
        <Image  source={require('../assets/icon_all_notes.png')}  
        style={{height:25, width:25,}}

        />
      )
    },
  },

},

{
  initialRouteName: 'Screen1',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}

);

const DrawerNavigatorExample = createStackNavigator({
  Drawer: { screen: Drawer, navigationOptions: { header: null } },
  DetailsNote: {
    screen: DetailsNote,
    navigationOptions: { title: 'Details Note' },
  },

  UpdateNotes: {
    screen: UpdateNotes,
    navigationOptions: { title: 'Update Note' },
  },

});


export default createAppContainer(DrawerNavigatorExample, CustomDrawerContentComponent);

现在，当我运行项目时，它显示以下错误-

如果我删除了TouchableOpacity，则会发生另一个错误，并且所有抽屉项都不会显示如下-

我想在ImageBackground下面显示我的三个抽屉项目，在抽屉项目下面显示一个文本组件，然后单击“文本”，我想转到另一个屏幕。

所以，我想知道我在犯什么错误以及如何解决该错误。

如何通过按React-Native中的“自定义抽屉”导航组件从一个屏幕转到另一个屏幕？

0 个答案: