ネイティブ反応ネイティブ配向(水平および垂直スクリーンウィジェット)サンプルコードを統合反応
1、インストール
#安装
npm install react-native-orientation --save
#链接所有依赖
react-native link react-native-orientation
2、公式のAPI
#锁定为横屏
lockToPortrait()
#锁定为竖屏
lockToLandscape()
#锁定为左竖屏
lockToLandscapeLeft()
#锁定为右竖屏
lockToLandscapeRight()
#解除所有锁定
unlockAllOrientations()
#得到当前屏幕的信息
getOrientation((err, orientation) => {})
getSpecificOrientation((err, specificOrientation) => {})
図3は、モニタを削除、追加します
Orientation.addOrientationListener((orientation)=>{});
Orientation.addSpecificOrientationListener((specificOrientation)=>{});
removeOrientationListener((orientation)=> {});
removeSpecificOrientationListener((specificOrientation)=> {});
4、サンプルコード
import React, {Component} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import Orientation from 'react-native-orientation';
export default class App extends Component<Props> {
constructor() {
super(...arguments);
this.state = {
isBool: Orientation.getInitialOrientation() === 'PORTRAIT',
summary: ''
};
this._handleOnPress = this._handleOnPress.bind(this);
}
componentDidMount() {
Orientation.lockToPortrait();
}
_handleOnPress = () => {
const {isBool} = this.state;
if (isBool) {
this.setState({isBool: false, summary: '本来是竖屏、现在锁定为横屏了....'});
Orientation.lockToLandscape();
} else {
this.setState({isBool: true, summary: '本来是横屏、现在锁定为竖屏了....'});
Orientation.lockToPortrait();
}
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>方向:{this.state.isBool ? '竖屏' : '横屏'}</Text>
<Text style={styles.welcome}>描述:{this.state.summary}</Text>
<Button title={'切换屏幕方向'}
onPress={() => this._handleOnPress()}/>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
5の効果を示します
1):デフォルト
2)風景肖像画に切り替え
3):横画面をポートレートに切り替わり
図6は、コンパイルが異常な問題を解決するためのパッケージ、実行はタスクに失敗しました「:反応-ネイティブの向きを:verifyReleaseResources」。
1):反応-ネイティブの向きを\アンドロイドの\ build.gradleファイルの依存関係が実装中であるコンパイル\ node_modulesを変更します。
2):アンドロイド\ build.gradleファイルのバージョンと一致して反応し、ネイティブの向きを\アンドロイド\のbuild.gradleファイルは、\ node_modulesを変更します。
3):再パッケージ化することができます。