Question

在react-navigation＆＃39; DrawerNavigator，有没有办法更改背景颜色？

默认情况下，颜色方案如下所示：

由以下内容初始化：

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

Answer 1

React Navigation提供了一种在声明屏幕和屏幕名称后使用 contentOptions 覆盖默认配置的方法。

使用上面的例子，改变背景颜色将是这样的：

#include <iostream>
#include <string>
#include <vector>

char non_repeating_char(std::string str){
    while(str.size() >= 2){
        std::vector<size_t> rmlist; 
        for(size_t  i = 1;  i < str.size(); i++){        
            if(str[0] == str[i]) {
                rmlist.push_back(i);
            }      
        }          

        if(rmlist.size()){            
            size_t s = 0;  // Need for terator position adjustment   
            str.erase(str.begin() + 0);
            ++s;
            for (size_t j : rmlist){   
                str.erase(str.begin() + (j-s));                
                ++s;
            }
         continue;
        }
        return str[0];
   }
    if(str.size() == 1) return str[0];
    else return -1;
}

int main(int argc, char ** args)
{
    std::string test = "FabaccdbefafFG";
    test = args[1];
    char non_repeating = non_repeating_char(test);
    Std::cout << non_repeating << '\n';
}

注意事项：

1）应在屏幕块之外声明ContentOptions。在其中声明它将意味着它是一个屏幕（显而易见的权利？！）。

2）抽屉本身就是一个屏幕，通过向contentOptions添加样式，您可以像在任何组件中一样执行任何样式。

3）使用不带const Drawer = DrawerNavigator( { dOne: {screen: Screen1}, dTwo: {screen: Screen2}, }, { initialRouteName: 'dOne', contentOptions: { style: { backgroundColor: 'black', flex: 1 } }, } );的backgroundColor只会将颜色包裹在内容周围，但是当包含flex时，它会匹配整个屏幕。

Answer 2

我看到的唯一解决方案是定制你的抽屉。您可以使用contentComponent选项进行自定义。例如：

const DrawerOptions = {
  contentComponent: CustomDrawerContentComponent,  
  drawerWidth: 300,
}; 

const CustomDrawerContentComponent = (props) => (
  <View style={styles.container}>
    <View style={styles.DrawerHeader}>
      <Text>Coucou</Text>
    </View>
    <View style={styles.DrawerItems}>
    <DrawerItems {...props} />
    </View>
  </View>
);

然后，您可以将您希望的样式添加为自定义背景颜色。希望它会对你有所帮助！

Answer 3

正在工作，像这样放在“ createDrawerNavigator”中

const MyDrawerNavigator = createDrawerNavigator({

  Home:  MyHomeScreen,    
Notifications: MyNotificationsScreen,

},{
drawerOpenRoute : "DrawerOpen",

drawerCloseRoute: "DrawerClose",

drawerToggleRoute: "DrawerToggle",

drawerBackgroundColor: "#f4511e"
});

Answer 4

可以通过使用导航器的 drawerStyle 道具来完成。

就像这样 -


const Drawer = createDrawerNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="dOne"
        drawerStyle={{
          backgroundColor: '#111',
        }}
        drawerContentOptions={{
          activeTintColor: '#fff', /* font color for active screen label */
          activeBackgroundColor: '#68f', /* bg color for active screen */
          inactiveTintColor: 'grey', /* Font color for inactive screens' labels */
        }}
      >
        <Drawer.Screen name="dOne" component={dOneScreen} />
        <Drawer.Screen name="dTwo" component={dTwoScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

DrawerNavigator：更改背景颜色

4 个答案:

注意事项：