[英]React Native: Is there way to add icon “share” into my drawer instead the button?
有沒有辦法將圖標“共享”添加到我的抽屜中? 我嘗試添加一個圖標<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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.