代码之家 › 专栏 › 技术社区 › Mendes

如何正确显示导航标题

react-navigation react-native reactjs javascript

Mendes · 技术社区 · 6 年前

请考虑以下导航堆栈代码:

import React, { Component } from "react";
import PropTypes from "prop-types";

import {
  createBottomTabNavigator,
  createSwitchNavigator
} from "react-navigation";

import Icon from "react-native-vector-icons/Ionicons";


import StackedTest from "./StackedTest";
import Test1 from "./Test1";

import { View, StyleSheet } from "react-native";


const LoggedInNavigator = createBottomTabNavigator(
  {
    test: {
      screen: Test1,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={"ios-list-box-outline"}
            size={24}
            color={focused ? tintColor : "#cdcdcd"}
          />
        )
      }
    },
    stacked: {
      screen: StackedTest,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={"ios-list-box-outline"}
            size={24}
            color={focused ? tintColor : "#cdcdcd"}
          />
        )
      }
    },
  },
  {
    tabBarOptions: {
      showLabel: false,
      activeTintColor: "white",
      activeBackgroundColor: "#dedede",
      style: {
        backgroundColor: "#FFFFFF"
      }
    },
    animationEnabled: true,
    swipeEnabled: true
  }
);

export const createRootNavigator = (loggedIn = false) => {
  return createSwitchNavigator(
    {
      LoggedIn: {
        screen: LoggedInNavigator
      }
    }
  );
};

import React, { Component } from "react";
import PropTypes from "prop-types";

import { createStackNavigator } from "react-navigation";

import Test1 from "./Test2";
import Test2 from "./Test2";


const stackedTest = createStackNavigator(
  {
    Test1: {
      screen: Test1
    },
    Test2: {
      screen: Test2
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#cdcdcd"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

export default stackedTest;

测试1.js

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Test1 extends Component {
  static navigationOptions = {
    title: "TEST 1 TITLE",
  };

  render = () => {
    return (
      <View style={styles.container}>
        <Text>TEST VIEW 1</Text>
      </View>
    );
  };
}

export default Test1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Test2 extends Component {
  static navigationOptions = {
    title: "TEST 2 TITLE",
  };

  render = () => {
    return (
      <View style={styles.container}>
        <Text>TEST VIEW 2</Text>
      </View>
    );
  };
}

export default Test2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

我得到以下信息:

显示“我的测试1”视图时不带标题:

1 回复 | 直到 6 年前

Olusola Omosola 6 年前

您可以通过在导航选项中设置标题样式来设置标题样式。

static navigationOptions = (
{
 title: "TEST 1 TITLE", 
 headerStyle: {{height: 50}
  }
 }
)