全局更改 Navigator backgroundColor

Question

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

我可以通过 Navigator 配置更改它吗（我使用 StackNavigator）？

注意：我不想更改 header backgroundColor，已经通过 headerStyle 更改了。

有没有综合的

Answer 1

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

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>
  );
}
(...)

全局更改 Navigator backgroundColor

Change Navigator backgroundColor globally

react-native

react-navigation