我在侧边菜单的主屏幕上有以下代码：
import React,{Component} from 'react';
import { StyleSheet,Text,View,TouchableHighlight,Image } from 'react-native';
import { Draweractions } from 'react-navigation';
export default class HomeScreen extends Component {
static navigationOptions = {
drawerLabel: 'Home'
}
render(){
return (
<View style={styles.view}>
<TouchableHighlight onPress={() => this.props.navigation.dispatch(Draweractions.openDrawer())}
style={styles.touchableHighlight} underlayColor={'rgba(0,0.8)'}>
<Text style={styles.open}> OPEN </Text>
</TouchableHighlight>
<Text style={styles.text}> This is the homescreen </Text>
</View>
);
}
}
const styles = StyleSheet.create({
view: {
flex: 1,alignItems: 'center',justifyContent: 'center',backgroundColor: 'white'
},text: {
fontSize: 26,color: 'purple'
},touchableHighlight: {
width: 50,height: 50,backgroundColor: 'red',borderRadius: 50,position: 'absolute',left: 10,top: 10
},open: {
color: 'white',fontSize: 16,fontWeight: 'bold'
}
})
我尝试了很多事情，主要是简单的事情，例如调整宽度和高度，但似乎没有任何效果。我不是一个很好的编码人员，但是我几乎可以肯定这可能是因为我的抽屉导航器已作为 main Homeview的一个组件导出。
如果您向下滚动，我已经从主Homeview中共享了一个代码段。
如果您有任何建议，我很高兴。谢谢！
render() {
return (
<Container style={styles.container}>
<Header style={styles.header}>
<Left>
<Button transparent onPress={this.onClickHome.bind(this)}>
<Icon active name="arrow-back" style={{color: '#000'}}/>
</Button>
</Left>
<Body>
<Title style={styles.title}>Victorise</Title>
</Body>
<Right>
<Switch onValueChange={() => this.onToggleEnabled()} value={this.state.enabled} />
</Right>
</Header>
--------> <DrawerNavigator /> <------ THIS IS WHERE IT IS CURRENTLY IMPLEMENTED.
<MapView
ref="map"
style={styles.map}
showsUserLocation={this.state.showsUserLocation}
followsUserLocation={false}
onLongPress={this.onLongPress.bind(this)}
onPanDrag={this.onmapPanDrag.bind(this)}
scrollEnabled={this.state.mapScrollEnabled}
showsMyLocationButton={false}
showsPointsofInterest={false}
showsScale={false}
showsTraffic={false}
toolbarEnabled={false}>
<Circle
key={this.state.stationaryLocation.timestamp}
radius={this.state.stationaryRadius||200}
fillColor={STATIONARY_REGION_FILL_COLOR}
strokeColor={STATIONARY_REGION_STROKE_COLOR}
strokeWidth={1}
center={{latitude: this.state.stationaryLocation.latitude,longitude: this.state.stationaryLocation.longitude}}
/>
<Polyline
key="polyline"
coordinates={(!this.state.settings.hidePolyline) ? this.state.coordinates : []}
geodesic={true}
strokeColor='rgba(0,179,253,0.6)'
strokeWidth={6}
zIndex={0}
/>
{this.renderMarkers()}
{this.renderStopZoneMarkers()}
{this.renderactiveGeofences()}
{this.renderGeofencesHit()}
{this.renderGeofencesHitEvents()}
</MapView>
<View style={styles.mapMenu}>
<Button success light={this.state.settings.hideMarkers} style={styles.mapMenuButton} onPress={() => this.onClickMapMenu('hideMarkers') }>
<Icon name="ios-pin" />
</Button>
<Button success light={this.state.settings.hidePolyline} style={styles.mapMenuButton} onPress={() => this.onClickMapMenu('hidePolyline')}>
<Icon name="ios-pulse" />
</Button>
<Button success light={this.state.settings.hideGeofenceHits} style={styles.mapMenuButton} onPress={() => this.onClickMapMenu('hideGeofenceHits')}>
<Icon name="ios-radio-button-off" />
</Button>
</View>
<Footer style={styles.footer}>
<Left style={{flex:0.3}}>
<Button info onPress={this.onClickgetcurrentPosition.bind(this)}>
<Icon active name="md-navigate" style={styles.icon} />
</Button>
</Left>
<Body style={styles.footerBody}>
<TouchableHighlight onPress={this.onClickTestMode.bind(this)} underlayColor="transparent">
<Text style={styles.status}>{this.state.motionactivity.activity}:{this.state.motionactivity.confidence}% · {this.state.odometer}km</Text>
</TouchableHighlight>
</Body>
<Right style={{flex: 0.3}}>
<Button danger={this.state.isMoving}
success={!this.state.isMoving}
disabled={!this.state.enabled}
onPress={this.onClickChangePace.bind(this)}>
<Icon active name={(this.state.isMoving) ? 'pause' : 'play'} style={styles.icon}/>
</Button>
</Right>
</Footer>
<actionButton
position="right"
hideShadow={false}
autoInactive={false}
active={this.state.isMainmenuOpen}
backgroundTappable={true}
onPress={this.onClickMainmenu.bind(this)}
verticalOrientation="up"
buttonColor="#7BBEC1"
buttonTextStyle={{color: "#ffffff"}}
spacing={15}
offsetX={10}
offsetY={actION_BUTTON_OFFSET_Y}>
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.sayIt('Hi')}>
{!this.state.isDestroyingLocations ? (<Icon name="ios-trash" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
</actionButton.Item>
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('destroyLocations')}>
{!this.state.isDestroyingLocations ? (<Icon name="ios-trash" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
</actionButton.Item>
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('sync')}>
{!this.state.isSyncing ? (<Icon name="ios-cloud-upload" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
</actionButton.Item>
{
// <actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('emailLog')}>
// {!this.state.isEmailingLog ? (<Icon name="ios-mail" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
// </actionButton.Item>
}
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('test')}>
{!this.state.isResettingOdometer ? (<Icon name="ios-trash" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
</actionButton.Item>
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('resetOdometer')}>
{!this.state.isResettingOdometer ? (<Icon name="ios-speedometer" style={styles.actionButtonIcon} />) : (<Spinner color="#000" size="small" />)}
</actionButton.Item>
<actionButton.Item size={40} buttonColor={COLORS.v_teal} onPress={() => this.onSelectMainmenu('settings')}>
<Icon name="ios-cog" style={styles.actionButtonIcon} />
</actionButton.Item>
</actionButton>
</Container>