我正在使用 React-Native 编写通用 iPhone/iPad 应用程序。但是,当方向发生变化时,我很难正确地呈现我的 View 。以下是js文件的源代码:
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var CardView = require('./CardView');
var styles = React.StyleSheet.create({
container:{
flex:1,
backgroundColor: 'red'
}
});
class MySimpleApp extends React.Component {
render() {
return <View style={styles.container}/>;
}
}
React.AppRegistry.registerComponent('SimpleApp', () => MySimpleApp);
这是它在 Portrait 中的呈现方式(正确):
但是当设备旋转时。红色 View 不会相应旋转。
最佳答案
最简单的方法是:
import React, { Component } from 'react';
import { Dimensions, View, Text } from 'react-native';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
}
this.onLayout = this.onLayout.bind(this);
}
onLayout(e) {
this.setState({
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
});
}
render() {
return(
<View
onLayout={this.onLayout}
style={{width: this.state.width}}
>
<Text>Layout width: {this.state.width}</Text>
</View>
);
}
}
关于ios - React-Native + Flex 不响应方向变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29914572/