Question

我有一个带有选项卡式导航的屏幕，其中每个屏幕都是堆栈导航类型，每个屏幕中定义了几个屏幕。当我从FamilyMembers导航到SingleContact屏幕时，我不想看到顶部带有后退按钮的导航栏。我希望单一联系人的观点（蓝色观点）从顶部开始。但是，尽管我将标头设置为null，但它似乎仍然存在！请帮忙。

// -------------------单个联系人屏幕---------- //

    import { Text, AsyncStorage, Image, FlatList, Alert, ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
    import { Icon, Container, Spinner, Content, Left, Right, Header, ListItem } from 'native-base'
    import profileService from '../services/Api/ProfileService';
    import { SafeAreaView } from 'react-navigation';

    HEADER_MAX_HEIGHT = 100
    HEADER_MIN_HEIGHT = 60
    PROFILE_IMAGE_MAX_HEIGHT = 80
    PROFILE_IMAGE_MIN_HEIGHT = 40

    export default class SingleContact extends Component {

        constructor(props) {
            super(props);
            this.state = { userName: "", contacts: [], userID: "", cookie: null, memberShips: [] };
        }
        async componentDidMount() {

        }
        onDataLoaded(result, userName) {

        }
        render() {
            return (
                <SafeAreaView>
                    <View style={{ flex: 1 }}>

// -------------------- App.js导航设置-------------------- ------ //

    const FamilyMembersStack = createStackNavigator({
  FamilyMembers: {
    screen: FamilyMembers,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Family members",       
      }
    }
  },
  SingleContact: {
    screen: SingleContact,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Contact"          
      }
    }
  },
}
  , {
    mode: 'modal',
    headerMode: 'none'
  });

const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  },
  FamilyMembersStack: {
    screen: FamilyMembersStack,
    navigationOptions: ({ navigation }) => {
      return {
        header: null
      }
    }
  },
  AttendanceHistory: {
    screen: AttendanceHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Attendance history"
      }
    }
  },
  OrderHistory: {
    screen: OrderHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Order history"
      }
    }
  }
});

HomeScreenStack.navigationOptions = {
  tabBarLabel: 'My info',
  tabBarIcon: ({ tintColor }) => (
    <FaIcon name="user" size={20} color={tintColor} />
  ),
};
const ScheduleScreenStack = createStackNavigator({
  Schedule: {
    screen: ScheduleScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

ScheduleScreenStack.navigationOptions = {
  tabBarLabel: 'Find a class',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-calendar" size={20} color={tintColor} />
  ),
};

const ShopScreenStack = createStackNavigator({
  Shop: {
    screen: ShopScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

ShopScreenStack.navigationOptions = {
  tabBarLabel: 'Get a pass',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-basket" size={20} color={tintColor} />
  ),
};

const NotificationsScreenStack = createStackNavigator({
  Notifications: {
    screen: NotificationsScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

NotificationsScreenStack.navigationOptions = {
  tabBarLabel: 'Notifications',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-alert" size={20} color={tintColor} />
  ),
};




const EventsStack = createStackNavigator({
  Events: {
    screen: Events,
    navigationOptions: ({ navigation }) => {
      return {
        tabBarLabel: "Events",
        tabBarIcon: ({ tintColor }) => (
          <Icon name="md-calendar" size={20} />
        ),
        headerLeft: (
          <Icon name="md-menu" style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            size={30} />
        )
      }
    }
  }
});

EventsStack.navigationOptions = {
  tabBarLabel: 'Events',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-calendar" size={20} color={tintColor} />
  ),
};
const DashboardTabNavigator = createBottomTabNavigator({
  HomeScreenStack,
  ScheduleScreenStack,
  ShopScreenStack,
  NotificationsScreenStack
},
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        header: null,
        headerTitle: routeName,
      }
    },
    tabBarOptions: {
      activeTintColor: 'white',
      inactiveTintColor: 'silver',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: 'rgba(24,130,201,1);',
      },
    }
  }, { initialRouteName: HomeScreenStack }
);

const DashboardStackNavigator = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator
});

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStackNavigator
  }
}, {
    contentComponent: props => <DrawerContent {...props} />
  });
const AppSwitchNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Login: { screen: Login },
  Dashboard: { screen: AppDrawerNavigator }
}, {
    initialRouteName: 'AuthLoading',
  }
);


const AppContainer = createAppContainer(AppSwitchNavigator);

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

Answer 1

您是否已经像这样在HomeScreenStack中修改了FamilyMembersStack？

    const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  },

  // modify this Stack

  FamilyMembersStack:{
    screen: FamilyMembersStack,
    navigationOptions: ({ navigation }) => {
      return {
        header: null
      }
    }
  }
  AttendanceHistory: {
    screen: AttendanceHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Attendance history"
      }
    }
  },
  OrderHistory: {
    screen: OrderHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Order history"
      }
    }
  }
});

跟进答案，删除以下内容。这样标题就会显示在指定的屏幕上：

 export default class SingleContact extends Component {
    static navigationOptions = {

        header: null, // remove this
    }
    constructor(props) {
        super(props);
        this.state = { userName: "", contacts: [], userID: "", cookie: null, memberShips: [] };
    }
    async componentDidMount() {

    }
    onDataLoaded(result, userName) {

    }
    render() {

// ------------------------------ //

const FamilyMembersStack  = createStackNavigator({
  FamilyMembers: {
    screen: FamilyMembers,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Family members",
        header:null        
      }
    }
  },
  SingleContact: {
    screen: SingleContact,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Contact",
        header:null // and remove this        
      }
    }
  },
});

从本地反应屏幕中删除导航标题-堆栈导航

1 个答案: