有没有办法将 "分享 "图标添加到我的抽屉里? 我尝试添加一个图标。<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;
};