Question

的package.json

'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;

组件：

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

当我打印到控制台的值时，＆＃34;方向＆＃34;我明白了：

$(document).ready(function ($) {
    $('.sidebar').perfectScrollbar({
        useBothWheelAxes: false
    })
});

但是在我打电话给 Orientation.getOrientation（）的下一行时，方向未定义！

Answer 1

我以不同的方式使用它并且它对我来说很好，请检查以下代码：

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);

react-native-orientation-listener无法读取属性＆＃39; getOrientation＆＃39;未定义的

1 个答案: