[英]React Native: Is there way to add icon “share” into my drawer instead the button?
Is there way to add icon "share" into my drawer?有没有办法将图标“共享”添加到我的抽屉中? i try to add an icon
<Ionicons name="md-share" size={24} color="black" />
that it will be instead the Button
.我尝试添加一个图标
<Ionicons name="md-share" size={24} color="black" />
它将代替Button
。 now if i do it so i see only icon with no title as i see in the settings
现在如果我这样做,我只会看到没有标题的图标,就像我在
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);
You can do something like this for your issue 1你可以为你的问题做这样的事情 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,
},
);
And if you want to change the tab settings when active and inactive如果您想在活动和非活动时更改选项卡设置
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;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.