如何在反应导航中使用堆栈以及抽屉导航器导航到特定屏幕?

时间:2019-06-30 06:33:27

标签: javascript android reactjs react-native react-navigation

我创建了一个具有两个屏幕的堆栈导航器:

  1. 首页
  2. 通知

然后我创建了Drawer导航器,并在其中嵌套了堆栈导航器,并将其命名为Home1

抽屉导航器屏幕:

  1. 堆栈导航器
  2. 通知

尽管我可以从堆栈和抽屉中导航到通知屏幕 但它没有按预期工作。

什么不起作用:

  1. 通知选项在导航时不会突出显示
  2. 标题不更改,基于导航通知屏幕的位置。

问题: 我只想使用两个不同的导航器导航到特定屏幕。

import React, {Component} from "react";
import { View, Text,Button, StyleSheet } from "react-native";
import { createStackNavigator,createDrawerNavigator, createAppContainer } from "react-navigation";
import Icon from 'react-native-vector-icons/FontAwesome'

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'lala',
    drawerIcon: () => (
      <Icon name="bars" size={32} color="black" />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />
      </View>
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
   drawerLabel: 'Notifications',
  title: 'From Stack Navigator',
    drawerIcon: () => (
      <Icon name="bars" size={32} color="black" />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
      </View>
    );
  }
}



const StackContainer = createStackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
},
{

  defaultNavigationOptions: {
    title:'Nav Are AmaZing',
    headerLeft:<Icon name="bars" size={32} color="white" />,
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
}
)

const MyDrawerNavigator = createDrawerNavigator({

  Home1:{screen: StackContainer,
    navigationOptions : {
      drawerLabel: 'Home',
    title: 'Navigation',
      drawerIcon: () => (
        <Icon name="bars" size={32} color="black" />
      ),
    }},
  Notifications: {
    screen: MyNotificationsScreen,
    navigationOptions : {
      drawerLabel: 'Notifications',
      title: 'From Drawer',
      drawerIcon: () => (
        <Icon name="bars" size={32} color="black" />
      ),
    }
  },

},
);



const AppContainer = createAppContainer(MyDrawerNavigator);

export default class App extends Component{
  render(){
    return (
      <AppContainer/>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#fff',
    justifyContent:"center",
    alignItems:'center'
  }
})

0 个答案:

没有答案