Question

我正在使用react导航器将页面重定向到另一页面，但是同时使用Tab导航和react导航器时，无法设置标题。例如，我有app.js和以下代码

import Dash from './components/Dash';
export const SimpleApp = StackNavigator({
  Dash:{ screen: Dash},
});

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

    );
  }
}

dash.js包含以下代码

 class Notes extends React.Component {
        static navigationOptions = {
        title: 'Some title',
      };
          render(){
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Details!</Text>
          </View>
        );
      }
    }
    class Message extends React.Component {
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Message!</Text>
          </View>
        );
      }
    }


    export default TabNavigator(//some code);

实际问题是一个堆栈导航器与另一个重叠。如何解决这个问题呢？还有其他设置标题的方法吗？

Answer 1

我希望我理解正确。但我认为这就是您所期待的。

export default createStackNavigator({
 Dash: {
  screen: Dash,
  navigationOptions: { header: 'Dash title'}
 },
Home: {
 navigationOptions: ({ navigation }) => ({header: null}),
 screen: createBottomTabNavigator(
  {
    Tab1: {
      screen: tab1,
      navigationOptions: { title: 'tab1' }
    },
    Tab2: {
      screen: tab2,
      navigationOptions: {title: 'tab2'}
    },
   },

  {
    navigationOptions: ({ navigation }) => ({
      tabBarPosition: 'bottom',
       tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
         labelStyle: {
           fontSize: 25,
           fontWeight: 'bold',
           padding: 12
         }
       }
     })
   }
 )
},

如何在React Native中避免重叠的堆栈导航器

1 个答案: