LoginSignup
2
1

More than 5 years have passed since last update.

[React Native]react-native-orientationのlandscapeがandroidとiosで逆向きになる

Last updated at Posted at 2017-10-23

背景

  • react-native-orientationを使っていたらiosとandroidで動きが違った

事象

  • iosとandroidでlandscapeLeft、landscapeRightの動きが反対

サンプル

ios

  • landscapeLeftで端末の右辺が下になる
  • landscapeRightで端末の左辺が下になる
  • ios.gif

  • landscapeLeftした状態

  • スクリーンショット 2017-10-23 23.28.52.png

android

  • landscapeLeftで端末の左辺が下になる
  • landscapeRightで端末の右辺が下になる
  • android.gif

  • landscapeLeftした状態

  • スクリーンショット 2017-10-23 23.29.04.png

ソースコード

App.js
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Orientation from 'react-native-orientation';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => Orientation.lockToPortrait() } style={[styles.panel, { backgroundColor: 'skyblue' }]}>
          <Text>lockToPortrait</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Orientation.lockToLandscapeLeft() } style={[styles.panel, { backgroundColor: 'lightblue' }]}>
          <Text>lockToLandscapeLeft</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Orientation.lockToLandscapeRight() } style={[styles.panel, { backgroundColor: 'lightgreen' }]}>
          <Text>lockToLandscapeRight</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  panel: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
index.ios.js/index.android.js
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('ReactNativeSample', () => App);

追記

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1