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，但是当我单击“返回”时，背景会恢复为白色，然后再返回上一个屏幕。

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，但是我只希望该颜色用于“搜索”屏幕，而另一种颜色用于“登录”屏幕。如果有人打电话给我，我会很乐意接受它作为答案。

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

1 个答案: