react-native-orientation-listener Cannot read prop

问题:

package.json

{
  "name": "MakeItCluster",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.4.1",
    "react-native": "0.39.2",
    "react-native-orientation-listener": "0.0.4",
    "react-native-vector-icons": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "15.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Component:

'use strict';

import React from 'react';
var Orientation = require('react-native-orientation-listener');

var Item = React.createClass({
    componentWillMount: function() {
        this._maintainDimensions();
    },

    render: function() {
        // ...
    },

    _maintainDimensions: function() {
        console.log(Orientation);
        Orientation.getOrientation(function(err, orientation) {
            // doing something here
        }.bind(this));
    }
});

module.exports = Item;

When I print to console the value of "Orientation" I see:

{
    addListener:addListener(callback)
    getOrientation: getOrientation(callback)
    removeListener: removeListener(listener)
    __proto__: Object
} 

But on the next line when I call Orientation.getOrientation(), Orientation is undefined!

回答1:

I am using it in different ways and its working fine for me, please check code below:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AppRegistry
} from 'react-native';
var Orientation = require('react-native-orientation-listener');
var or="j";
export default class Googleplay extends Component {
  constructor(props){
    super(props);
    this.state = { or: ''};
  }
  _maintainDimensions() {
        console.log(Orientation);
        Orientation.getOrientation(function(err, orientation) {
          console.warn(err);
            console.warn(orientation);
        }.bind(this));
    }
    componentWillMount() {
        this._maintainDimensions();
    }

  _setOrientation(data) {

    //console.warn(data.orientation+' "'+data.device+'"');
    this.setState({ or: data.orientation});
  }
  componentDidMount(){
    Orientation.getOrientation(
    (orientation, device) => {
      console.warn(orientation, device);
      this.setState({ or: orientation});
    }
    );
    Orientation.addListener(this._setOrientation.bind(this));
  }
  render() {
    if(this.state.or == "PORTRAIT"){
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          PORTRAIT
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
    }else{
      return (
        <View style={styles.container}>
          <Text style={styles.welcome}>
            LANDSCAPE
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.android.js
          </Text>
          <Text style={styles.instructions}>
            Double tap R on your keyboard to reload,{'\n'}
            Shake or press menu button for dev menu
          </Text>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Googleplay', () => Googleplay);