全局更改导航器背景颜色

Question

默认导航器，应用程序背景是一些浅灰色，大约#e4e3eb .

我

可以通过导航器配置（我使用 StackNavigator）来更改它吗？

注意：我不想更改标题背景颜色，已经通过headerStyle

.

有没有全面的

Answer 1

这个问题有点晚了，但是是的，您可以使用 cardStyle 选项属性更改堆栈导航器卡的背景。

const HomeStack = createStackNavigator( {
  s1: {screen:screen1},
  s2: {screen:screen2},
  s3: {screen:screen3},
  s4: {screen:screen4},
},{
    navigationOptions: {
      headerStyle:{backgroundColor:'#FFFF00'},
      headerTintColor:'white',
      gesturesEnabled:false
    },
    cardStyle: {
      backgroundColor: 'white'
    }
  }
);

Answer 2

您可以使用defaultNavigationOptions而不是navigationOptions：

const globalNavigator = createStackNavigator(
{
    screen1: screen1,
    screen2: screen2,
}, 
{
    defaultNavigationOptions: () => ({
        cardStyle: {
            backgroundColor: "rgba(0,0,0,0.5)",
        },
    }),
    headerMode: "none",
})

Answer 3

对于create-react-native-app TypeScript版本，cardStyle将进入屏幕项目的选项。下面是产品页面的示例：

(...)
const ProductsStack = createStackNavigator<TabOneParamList>();
function TabOneNavigator() {
  return (
    <ProductsStack.Navigator>
      <ProductsStack.Screen
        name="ProductsScreen"
        component={ProductsScreen}
        options={{
          cardStyle: {
            backgroundColor: 'white',
          }
        }}
      />
    </ProductsStack.Navigator>
  );
}
(...)