Question

我正在尝试向我的应用添加抽屉式导航。但是，我遇到了问题，不知道为什么会出现。我正在关注this YouTube video。

我正在尝试创建一个带有选项卡的导航抽屉，例如首页，我的个人资料，设置等。
```
const AppDrawerNavigator = createDrawerNavigator({
  Home: HomeScreen
}, {
  contentComponent: CustomDrawerComponent
})
```
当我尝试加载Home：HomeScreen时，无论出于何种原因，代码均不会加载或崩溃。但是，如果我执行类似Login: LoginScreen或SignUp: SignUpScreen的代码，则代码将正常运行并正确导航选项卡，避免使用Home:HomeScreen。
<AppDrawerNavigator/>
每当我将此标签放在return语句之间时，都会得到
的错误

执行UI块时引发异常：
[ABI27_0_0RCTview updateContentOffsetINeeded]：

我丝毫不知道那是什么意思，为什么。
当我在返回中执行某些操作时，例如：
```
<AppDrawerNavigtor>
  <MapView>
  </MapView>
</AppDrawerNavigtor>
```
该应用程序可以正常工作，而抽屉导航器可以处理1中提出的问题。

任何帮助将不胜感激！
这是我的代码。请原谅其格式问题。

import React from 'react';    
import { StyleSheet, Text, View, KeyboardAvoidingView,Dimensions, Button, SafeAreaView, Image, ScrollView, TouchableOpacity} from 'react-native';    
import MapView from 'react-native-maps';    
import { Constants, Location, Permissions } from 'expo';   
import {createDrawerNavigator, DrawerItems} from 'react-navigation';    
import {Header, Left, Icon} from 'native-base';    
import LoginScreen from '../LoginScreen/LoginScreen';    
import SignUpScreen from '../SignUpScreen/SignUpScreen';    
import { Ionicons } from '@expo/vector-icons';`

const {width, height} = Dimensions.get('window')    
const SCREEN_HEIGHT = height    
const SCREEN_WIDTH = width    
const ASPECT_RATIO = width / height    
const LATITUDE_DELTA = 0.0922    
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

export default class HomeScreen extends React.Component {    
  static navigationOptions = {
    header: null
  };


  // gets users current location
  constructor(props){
    super(props)

    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0
      },

      markerPosition: {
        latitude: 0,
        longitude: 0
      }
    }
  }

 watchID = null

    componentDidMount() {

 navigator.geolocation.getCurrentPosition((position) => {

 var lat = parseFloat(position.coords.latitude)

var long = parseFloat(position.coords.longitude)

        var initialRegion = {

latitude: lat,            
longitude: long,            
latitudeDelta: LATITUDE_DELTA,            
longitudeDelta: LONGITUDE_DELTA

}

 this.setState[{initialPosition: initialRegion}]

 this.setState[{markerPosition: initialRegion}]

 }, (error) => alert(JSON.stringify[error]),

 {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000})

    this.watchID = 

navigator.geolocation.watchPosition((position) => {

var lat =  parseFloat(position.coords.latitude)

var long = parseFloat(position.coords.longitude)

 var lastRegion = {

latitude: lat,

 longitude: long,

 longitudeDelta: LONGITUDE_DELTA,

latitudeDelta: LATITUDE_DELTA

}

this.setState({initialPosition: lastRegion})
this.setState({markerPosition: lastRegion})

 })

}

 componentWillMount() {

 navigator.geolocation.clearWatch(this.watchID)

}

  render() {

return (

 <MapView  style = {[style.container, style.map]}

region = {this.state.initialPosition}>

 <Header>

<TouchableOpacity  onPress = {() => this.props.navigation.openDrawer('DrawerOpen')}>

<Ionicons name="ios-menu" size={30} color="#01D56A"/>

</TouchableOpacity>

</Header>

      <MapView.Marker coordinate = {this.state.markerPosition}>


 <View style = {style.radius}> 

<View style = {style.marker}/>

      </View>

      </MapView.Marker>

      <View style = {style.menuSection}>

      </View>

 <AppDrawerNavigator/>

</MapView>

  );

  }

}

const style = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },

 text: {
      color: '#fff'

},
  map: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    position: 'absolute'
    },

  radius:{

      height: 50,
      width: 50,
      borderRadius: 50 / 2,
      overflow: 'hidden',
      backgroundColor: 'rgba(1,213,106,0.3)',
      borderWidth: 1,
      borderColor: 'rgba(1,213,106,0.3)',
      alignItems:'center',
      justifyContent: 'center'
    },

  marker: {
      height: 20,
      width: 20,
      borderWidth: 3,
      borderColor: '#fff',
      borderRadius: 20 / 2,
      borderWidth: 3,
      overflow: 'hidden',
      backgroundColor: '#01D56A'

    },

 menuSection: {
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height/3,
  },

// side menu

const CustomDrawerComponent = (props) => (

  <SafeAreaView style = {{flex: 1}}> 

  <View style = {{height: 150, backgroundColor: 'white'} }>

  <DrawerItems {... props} />

    </ScrollView>

  </SafeAreaView>

)

const AppDrawerNavigator = createDrawerNavigator({

  Home: HomeScreen
}, {
  contentComponent: CustomDrawerComponent
})

执行UI块时引发异常：-[ABI27_0_0RCTview updateContentOffsetINeeded]：

0 个答案: