Question

我正在尝试在键盘处于活动状态时缩短屏幕。但它总是在android中调整它奇怪，它在iOS中运行良好。在键盘处于活动状态之前：

键盘激活后：

我正在使用RN 0.37，当我从头开始时也会发生这种情况：

这是我的代码：

import React from 'react';

import {
  Keyboard,
  Dimensions,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  AppRegistry
} from 'react-native';

var {height, width} = Dimensions.get('window');
var _keyboardWillShowSubscription;
var _keyboardWillHideSubscription;
height = height - 20;

class awesomeproject extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            height: height,
        };
    }
    componentDidMount() {
        _keyboardWillShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => this._keyboardWillShow(e));
        _keyboardWillHideSubscription = Keyboard.addListener('keyboardDidHide', (e) => this._keyboardWillHide(e));
    }
    componentWillUnmount() {
        _keyboardWillShowSubscription.remove();
        _keyboardWillHideSubscription.remove();
    }
    _keyboardWillShow(e) {
        this.setState({height: height - e.endCoordinates.height});
    }
    _keyboardWillHide(e) {
        this.setState({height: height});
    }
  render() {
    return (
        <View style={{height: this.state.height}}>  
            <View style={{backgroundColor: 'blue', flex: 1}} />
            <View style={styles.fieldBox}>
                <TextInput 
                    style={styles.field}
                    placeholder={'hello'}
                    autoCapitalize={'none'}
                    placeholderTextColor={'#afbccc'}
                    blurOnSubmit={false}
                    autoCorrect={false}
                    ref={'textinput'}
                    onChangeText={(data) => this.setState({message: data})} />
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  field: {
        color:'black',
        fontWeight:'bold',
        fontSize:18,
        flex: 1,
        marginHorizontal: 10
    },
});

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

Answer 1

在andooird计算的高度更多我认为。为了我的要求我删除了e.endCorordinaets.height并把它放了0.

视图自动在andorid中调整大小。所以你不知道android中的这个setState。无需在andorid中更改高度。它会自动工作，但我认为需要在ios中工作。所以删除更改高度并检查视图是否自动调整大小。

删除此

 this.setState({height: height - e.endCoordinates.height});

当键盘出现时的高度调整在react-native android中是错误的

1 个答案: