尝试在React-Native中调用虚拟方法

时间:2019-07-19 06:46:43

标签: react-native

当我运行我的本机代码时,它给出错误并说:

尝试在空对象引用上调用虚拟方法'com.facebook.react.bridge.CatalystInstance com.facebook.react.bridge.ReactContext.getCatalystInstance()'

enter image description here

但是如果我第二次运行代码时,它没有显示这种类型的错误,并且代码成功运行。此错误的原因是什么?请提出任何答案。

和我的App.js文件在这里。

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Platform, Animated } from 'react-native';
const Sliding_Drawer_Width = 300;
export default class App extends Component {
  constructor()
  {
      super();
      this.Animation = new Animated.Value(0);
      this.Sliding_Drawer_Toggle = true;
  }
 ShowSlidingDrawer = () =>
  {
      if( this.Sliding_Drawer_Toggle === true )
      {
              Animated.timing(
                  this.Animation,
                  {
                      toValue: 1,
                      duration: 500
                  }
              ).start(() =>
              {
                  this.Sliding_Drawer_Toggle = false;
              });                 
      }
      else
      {
              Animated.timing(
                  this.Animation,
                  {
                      toValue: 0,
                      duration: 500
                  }
              ).start(() =>
              {
                  this.Sliding_Drawer_Toggle = true;
              });
      }
  }

  render() {
    const Animation_Interpolate = this.Animation.interpolate(
      {
          inputRange: [ 0, 1 ],
          outputRange: [ -(Sliding_Drawer_Width - 32), 0 ]
      });

    return (

          <View style = { styles.MainContainer }>
              <Text style = {styles.TextStyle}> Components Which You Want To Show in App, Place Them Here. </Text>
                <Animated.View style = {[ styles.Root_Sliding_Drawer_Container, { transform: [{ translateX: Animation_Interpolate }]}]}>
                    <View style = { styles.Main_Sliding_Drawer_Container }>
                        <Text style = { styles.TextStyle } > Put All Your Components Here Which You Want To Show Inside Sliding Drawer. </Text>  
                    </View> 
                    <TouchableOpacity onPress = { this.ShowSlidingDrawer } style = {{ padding: 1 }}>
                        <Image source = {{ uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/Arrow_Icon.png' }} style = {{resizeMode: 'contain', width: 30, height: 30 }} />
                    </TouchableOpacity>
                </Animated.View>                
          </View>

    );
  }
}

const styles = StyleSheet.create(
  {
      MainContainer:
      {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
      },

      Root_Sliding_Drawer_Container:
      {
          position: 'absolute',
          flexDirection: 'row',
          left: 0,
          bottom: 0,
          top: (Platform.OS == 'ios') ? 20 : 0,
          width: Sliding_Drawer_Width,
      },

      Main_Sliding_Drawer_Container:
      {
          flex: 1,
          backgroundColor: '#FFC107',
          paddingHorizontal: 10,
          justifyContent: 'center',
          alignItems: 'center'
      },

      TextStyle: {

          fontSize: 25,
          padding: 10, 
          textAlign: 'center',
          color: '#FF5722'
      }

  });

0 个答案:

没有答案