反應母語方位用監聽器無法未定義

Question

的package.json的讀取屬性「getOrientation」

{ 
    "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" 
    } 
} 

組件：

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

但是，當我打電話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);