React原生Android键盘立即被解雇

时间:2017-02-16 11:12:59

标签: android react-native keyboard android-softkeyboard

此代码显示一个列表,其中每行的TextInput大约为100像素。当键盘弹出时,它应该使列表缩小键盘的高度。如果我选择上面的行,这是有效的。但如果我选择底行,它将显示键盘并立即再次隐藏它。如何保持键盘可见? 我尝试了React Native的KeyboardAvoidingView,但它让一切变得更糟。 我尝试动画高度变化,但它的行为就像一个喝醉的猿。 将样式从'marginBottom'更改为'height'无效。

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class MyList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            keyboardHeight: 0,
            dataSource: ds.cloneWithRows(["", "", "", "", "", "", "", ""]),
        };
    }

    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', e => this._keyboardDidShow(e));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', e => this._keyboardDidHide(e));
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }

    _keyboardDidShow (e) {
        this.setState({
            keyboardHeight: e.endCoordinates.height
        })

    }

    _keyboardDidHide () {
        this.setState({
            keyboardHeight: 0
        })
    }

    render() {
        const wrapper = {
            paddingTop: 30,
            marginBottom: this.state.keyboardHeight,
        };
        return (
            <View
                style={wrapper}
            >
                <ListView
                    enableEmptySections={true}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <MyRow data={rowData}/>}
                />
            </View>
        )
    }
}

0 个答案:

没有答案