javascript - React Native:有没有办法将图标“共享”添加到我的抽屉而不是按钮?
问题描述
有没有办法将图标“共享”添加到我的抽屉中?我尝试添加一个图标<Ionicons name="md-share" size={24} color="black" />
,它将代替Button
. 现在,如果我这样做,我只会看到没有标题的图标,就像我在settings
import { shareDb } from '../helpers/shareDb';
const PlacesNavigator = createStackNavigator(
{
screen1: WaterQualitySamplesScreen, // FUNCTIONAL COMPONENT.
screen2: AreasPrototypesScreen, // CLASS COMPONENT.
screen3: PrototypePointsScreen,
screen4: ListOfPerformanceRequirementsScreen,
screen5: ContainersForSampling_1,
screen6: ContainersForSampling_2,
screen7: ContainersForSampling_3,
settings: SettingsScreen,
},
{
mode: 'modal',
defaultNavigationOptions: {
headerStyle: {
// animationEnabled: true,
backgroundColor: Platform.OS === 'android' ? Colors.primary : '',
},
headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
},
}
);
const SettingsNavigator = createStackNavigator(
{
settings: SettingsScreen,
},
{
navigationOptions: {
drawerIcon: (drawerConfig) => (
<Ionicons
name={Platform.OS === 'android' ? 'md-settings' : 'ios-settings'}
size={23}
color={drawerConfig.tintColor}
/>
),
},
}
);
const MainNavigatopr = createDrawerNavigator(
{
'close menu': PlacesNavigator,
settings: SettingsNavigator,
},
{
contentComponent: (props) => (
<SafeAreaView style={styles.container}>
<View
style={{
height: 220,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 60,
paddingBottom: 20,
}}
>
<Image
source={require('../assets/drawer_image.png')}
style={{ width: '100%', height: '100%' }}
resizeMode="contain"
/>
<View style={styles.sidebarDivider}></View>
</View>
<ScrollView>
<DrawerItems {...props} />
<Button title="LOG OUT" onPress={() => shareDb()} title="DB-Share" />
</ScrollView>
</SafeAreaView>
),
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
sidebarDivider: {
height: 1,
width: '100%',
backgroundColor: 'lightgray',
marginVertical: 10,
},
});
export default createAppContainer(MainNavigatopr);
解决方案
你可以为你的问题做这样的事情 1
const SettingsNavigator = createStackNavigator(
{
settings: SettingsScreen,
},
{
initialRouteName:settings,
navigationOptions: {
title: 'Settings',
style: settingStyle.header, // you can create a different style sheet and import in here
titleStyle: settingStyle.headerTitle,
tabBarIcon: ({ tintColor }) => (
<Image source={settingActive} style={[{ tintColor }]} />
),
} as NavigationBottomTabOptions,
},
);
如果您想在活动和非活动时更改选项卡设置
SettingScreens.navigationOptions = () => {
const navigationOptions: NavigationBottomTabOptions = {};
navigationOptions.tabBarLabel = ({ focused }: any) =>
focused ? (
<Text style={styles.fontBoldCenter}> Setting</Text>
) : (
<Text style={styles.fontCenter}> Setting</Text>
);
navigationOptions.tabBarIcon = ({ focused }) =>
focused ? (
<Image source={settingActive} />
) : (
<Image source={settingInactive} />
);
return navigationOptions;
};
推荐阅读
- r - 如何使用单个直方图演示样本均值的平均值
- node.js - 在 Cloud Function Shell 中使用 Express App 调用 HTTP 函数时如何传递参数
- python - 带有python问题的嵌套JSON
- javascript - 在 Leaflet 的 pointToLayer 中仅对数组中的一个元素进行样式设置
- php - WooCommerce:向产品循环项目添加类
- javascript - 如何验证 Chrome 扩展程序身份。(Node.js)
- scala - 在不使用 \n 字符的情况下解析 json
- python - 姜戈 2.2。而不是我的模板 django 使用标准
- asp.net - ASP.NET Core 中的 IoC 服务容器上下文中的请求是什么?
- java - 处理来自谷歌云存储的文件