react-native - 单击后退按钮时，React Native 导航标题背景颜色恢复为白色

Question

我的应用程序上有 5 个屏幕，我正在按如下方式进行导航：

Landing screen
- Login screen
  - Admin screen
- Search screen
  - Profile

我的问题是当我推送到屏幕并单击后退按钮时，当前推送屏幕上导航标题的背景颜色恢复为白色。

这是我在 App.js 上的堆栈导航

const AppStack = createStackNavigator(
{
 Landing: { screen: Landing },
 Login: {
  screen: Login,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#a13547" }}>Back</Text>
      </TouchableOpacity>
    ),
    headerStyle: {
      backgroundColor: "#cccccc",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    },
    headerTintColor: "#a13547"
  }),
  mode: "modal"
},
Admin: {
  screen: AdminScan,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#cccccc" }}>Back</Text>
      </TouchableOpacity>
    ),
    mode: "modal",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    }
  })
},
Search: {
  screen: Search,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#cccccc" }}>Back</Text>
      </TouchableOpacity>
    ),
    mode: "modal",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    }
  })
},
Profile: {
  screen: Profile,
  navigationOptions: ({ navigation }) => ({
    mode: "card",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    },
    headerTintColor: "#cccccc"
  })
}
}
);

例如，我最初在着陆屏幕上。当我在搜索屏幕上导航时，标题背景颜色设置为#a13547，但是当我单击返回时，背景会在返回上一个屏幕之前恢复为白色。

标签： react-nativereact-navigation

Answer 1

好的，我设法通过将背景设置为整个堆栈导航器来解决在后台模式下恢复为白色的问题。

const AppStack = createStackNavigator(
{
Landing: { screen: Landing },
Login: {
  screen: Login,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#a13547" }}>Back</Text>
      </TouchableOpacity>
    ),
    headerStyle: {
      backgroundColor: "#cccccc",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    },
    headerTintColor: "#a13547"
  }),
  mode: "modal"
},
Admin: {
  screen: AdminScan,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#cccccc" }}>Back</Text>
      </TouchableOpacity>
    ),
    mode: "modal",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    }
  })
},
Search: {
  screen: Search,
  navigationOptions: ({ navigation }) => ({
    headerLeft: (
      <TouchableOpacity
        style={{ marginLeft: 10 }}
        onPress={() => navigation.goBack()}
      >
        <Text style={{ color: "#cccccc" }}>Back</Text>
      </TouchableOpacity>
    ),
    mode: "modal",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    }
  })
},
Profile: {
  screen: Profile,
  navigationOptions: ({ navigation }) => ({
    mode: "card",
    headerStyle: {
      backgroundColor: "#a13547",
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0
    },
    headerTintColor: "#cccccc"
  })
}
},// add background color for the whole stack
{
navigationOptions: ({ navigation }) => ({
  mode: "card",
  headerStyle: {
    backgroundColor: "#a13547",
    elevation: 0,
    shadowOpacity: 0,
    borderBottomWidth: 0
 },
 headerTintColor: "#cccccc"
 })
 }
 );

我现在唯一的问题是堆栈上的所有标题都将设置为#a13547，但我只希望搜索屏幕的颜色和登录屏幕的颜色不同。如果有人打电话求助，我很乐意接受它作为答案。