我试图在react-navigation 抽屉中的每个屏幕上添加一个图标,但图标没有出现.

这是我的代码:

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
        activeTintColor: 'white',
        inactiveTintColor: 'white',
        itemStyle: { alignItems:'flex-end' },
       }}>
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        
      </Drawer.Navigator>
    
  );
}


export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerTitleAlign:"center",
            headerRight: ({}) => <HeaderRight />,
            headerLeft: ({}) => <Search />
          }}
          component={Drawer}
          name="Drawer"
        />
        <Stack.Screen name="Product" component={Product} options={{title:"product"}} />
        {/*
         * Rest Screens
         */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在文档中,添加图标仅在DroperItem中提到:

https://reactnavigation.org/docs/en/drawer-navigator.html

推荐答案

你只需在选项中添加抽屉即可

<Drawer.Navigator>
    <Drawer.Screen name="Home" component={Home}
        options={{
           title: 'Home',
           drawerIcon: ({focused, size}) => (
              <Ionicons
                 name="md-home"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}
   />
</Drawer.Navigator>

你也可以像这样直接传递 colored颜色

...
drawerIcon: ({color, size}) => (
            <Ionicons
               name="md-home" size={size} color={color}
            />
          ),
...

这里我使用了Ionicons作为图标,你可以使用自己的图标组件或从"react native vector icons/Ionicons"导入Ionicons.

React-native相关问答推荐

应用程序主体尚未注册

如何在 React Native 的嵌套 Touchable 中传播touch 事件?

react-native-firebase crashlytics 未显示在 firebase 仪表板上

如何在 React Native 中创建和保存 CSV 文件?

如何运行 React-Native 示例?

使用react native获取设备令牌

纯在 Swift 中的 React Native 应用程序

使用 Android NDK 在 C 或 C++ 中创建 react-native Native Module?

React-Native:显示加载屏幕直到加载 webview

react-native 从右到左

你能在 Ubuntu 上构建 React Native 应用程序(Android 应用程序)吗?

Realm 和 React Native - 实现自动更新的最佳实践?

可以react native使用jQuery

如果我有 AngularJS 基础知识,怎么学习Thinking in ReactJS呢?

react-native run-android 在设备上构建旧版本的代码

如何在样式组件之外获取主题?

DeviceInfo 原生模块未正确安装

ExpoKit 和 React Native 元素的区别

手动调用 React.PropTypes 验证 React native "^0.30.0"

使用行数react-native文本组件