У меня есть следующий компонент:
ScrollView
с TextInput
и Button
. Я хочу, чтобы TextInput
вверху и Button
внизу (justifyContent: 'space-between'
). Я запускаю этот компонент из приложения Android Native. Итак, я работаю над гибридным приложением .
Выпуск:
Когда я нажимаю на TextInput
, появляется клавиатура, которая перекрывает нижнюю button
. Если после этого я обновлю scrollView
, потянув вниз, над клавиатурой появится нижняя строка button
(что я хочу).
Что-то происходит после рендеринга RefreshControl
, который устанавливает правильную позицию моего button
. Но мой компонент выглядит не очень хорошо, пока я не потяну, чтобы обновить его, и активированный компонент RefreshControl
активируется.
Мой код:
import React, { Component } from 'react';
import { View, KeyboardAvoidingView, TextInput, RefreshControl, Button, ScrollView } from 'react-native';
export default class Authenticate extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false
};
}
render() {
return (
<KeyboardAvoidingView enabled style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{ flex: 1, backgroundColor: 'gray', justifyContent: 'space-between' }}
refreshControl={<RefreshControl refreshing={this.state.refreshing} />}>
<View style={{ height: 200, backgroundColor: 'red' }}>
<TextInput
style={{
height: 60,
color: 'white',
backgroundColor: 'gray',
fontSize: 20,
textAlign: 'center'
}}
value="Press Me"
/>
</View>
<Button style={{ backgroundColor: 'blue', width: '100%' }} title="Footer button" />
</ScrollView>
</KeyboardAvoidingView>
);
}
}