Question

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

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

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

是否有全面的

Answer 1

您可以使用defaultNavigationOptions代替navigationOptions：

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

Answer 2

这个问题有点晚了，但是是的，您可以使用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 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>
  );
}
(...)

全局更改导航器backgroundColor

3 个答案: