我使用react-native构建迷你聊天视图 我的屏幕是从3个组件构建的
标题
ListView的
输入（输入需要修复）
我正在使用带有填充的KeyboardAvoidingView 键盘的汉德尔 但我得到了丑陋的结果 在我的listView顶部 就像我在键盘到达之前添加填充
you can see the problem in the gif
我的代码：
主屏幕：
class Registration extends Component{
render(){
return(
<KeyboardAvoidingView style={Style.continerStyle} behavior="padding">
<StatusBar
hidden={true}
/>
<Header/>
<RegChat/>
<RegInput/>
</KeyboardAvoidingView>
);
}
}
const Style = {
continerStyle:{
flex:1,
backgroundColor:'#543CDE',
},
}
export default Registration;
我的列表视图：
class RegChat extends Component{
constructor(){
super()
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2',,'You should receive a 6-digit code in a moment for verification', 'row 2']),
inputType:'phone',
};
}
render(){
return(
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
style={{backgroundColor:'black'}}
dataSource={this.state.dataSource}
renderRow={(rowData) => <RegBubble>{rowData}</RegBubble>}
/>)
}
}
export {RegChat};