此代码显示一个列表,其中每行的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>
)
}
}