Реагировать на собственный цвет фона заголовка навигации при нажатии кнопки «Назад» становится белым

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"
  })
}
}
);

Например, я изначально на экране Landing.Когда я перемещаюсь по экрану поиска, цвет фона заголовка устанавливается на # 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, но я хочу, чтобы этот цвет только для экрана поиска, а другой - для экрана входа в систему.Если кто-нибудь вызовет помощь, я с радостью приму это в качестве ответа.