android平板横屏问题



  • 联想Andriod平板显示modal的时候没有全屏。(平板为固定横屏,分辨率为1920x1200)请问大神怎么解决这个问题。
    截图和代码如下:
    1_1472787247197_Screenshot_2016-09-02-11-00-01.png 0_1472787247196_Screenshot_2016-09-02-10-59-57.png
    代码部分:
    /**

    Sample React Native App
    https://github.com/facebook/react-native
    @flow
    */
    import React, { Component } from 'react';
    import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Modal,
    NativeModules,
    TouchableHighlight,
    Switch,
    } from 'react-native';

    var bluetooth = NativeModules.Bluetooth;
    var Dimensions = require('Dimensions');

    class Button extends React.Component {
    constructor(props){
    super(props);
    this.state={
    active: false,
    };
    this._onHighlight = this.onHighlight.bind(this);
    this._onUnhighlight = this.onUnhighlight.bind(this);
    // bluetooth.initBlueTooth();
    }

    onHighlight() {
    this.setState({active: true,});
    }

    onUnhighlight() {
    this.setState({active: false,});
    }

    render() {
    var colorStyle = {
    color: this.state.active ? '#fff' : '#000',
    };
    return (
    <TouchableHighlight
    onHideUnderlay={this._onUnhighlight}
    onPress={this.props.onPress}
    onShowUnderlay={this._onHighlight}
    style={[styles.button, this.props.style]}
    underlayColor="#a9d9d4">
    <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
    </TouchableHighlight>
    );
    }
    }

    class BatchCard extends Component {

    constructor(props){
    super(props);
    this.state={
    animationType: 'none',
    modalVisible: true,
    transparent: false,

    };
    this._toggleTransparent = this.toggleTransparent.bind(this);
    }

    _setModalVisible(visible) {
    this.setState({modalVisible: visible});
    }

    _setAnimationType(type) {
    this.setState({animationType: type});
    }

    toggleTransparent() {
    this.setState({transparent: !this.state.transparent});
    }

    render() {
    const modalBackgroundStyle = {
    backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.3)' : '#f5fcff',
    }
    const innerContainerTransparentStyle = this.state.transparent
    ? {backgroundColor: 'red', padding: 20}
    : null

    return (
    <View style={{paddingTop:20,paddingLeft:10,paddingRight:10}}>
    <Text style={{color:'red'}}>Modal实例演示</Text>
    <Modal
    animationType={this.state.animationType}
    transparent={this.state.transparent}
    visible={this.state.modalVisible}
    onRequestClose={() => {this._setModalVisible(false)}}

    <View style={[styles.container, modalBackgroundStyle]}>
    <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
    <Text>Modal视图被显示:{this.state.animationType === 'none' ? '没有' : '有'+this.state.animationType}动画效果.</Text>
    <Button
    onPress={this._setModalVisible.bind(this, false)}
    style={styles.modalButton}>
    关闭Modal
    </Button>
    </View>
    </View>
    </Modal>
    <View style={styles.row}>
    <Text style={styles.rowTitle}>动画类型</Text>
    <Button onPress={this._setAnimationType.bind(this,'none')} style={this.state.animationType === 'none' ? {backgroundColor:'red'}: {}}>
    无动画
    </Button>
    <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? {backgroundColor:'yellow'} : {}}>
    滑动效果
    </Button>
    </View>

    <View style={styles.row}>
      <Text style={styles.rowTitle}>透明</Text>
      <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
    </View>
    
    <Button onPress={this._setModalVisible.bind(this, true)}>
        显示Modal
    </Button>
    

    </View>
    )}
    }

    const styles = StyleSheet.create({
    modal: {
    justifyContent: 'center',
    },

    container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    },

    innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
    },
    row: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    marginBottom: 20,
    },
    rowTitle: {
    flex: 1,
    fontWeight: 'bold',
    },
    button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
    },
    buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
    },
    modalButton: {
    marginTop: 10,
    },
    });

    AppRegistry.registerComponent('BatchCard', () => BatchCard);



  • 没有人遇过过这个问题么?


  • administrators

    官方表示知道这个问题,但暂时无人处理
    https://github.com/facebook/react-native/issues/7708
    建议换第三方modal库或自己用view实现


登录后回复