KeyboardAvoidingView не работает с Expo
Кажется, я не могу заставить клавиатуру подталкивать контент в моем приложении React-Native Expo. Я тестирую это из приложения expo, публикуя его со своей машины для разработки.
Как бы я ни старался, кажется, что ничто не подталкивает взгляд вверх, когда клавиатура переходит в фокус, есть ли определенный порядок компонентов или какое-то свойство, которое мне не хватает; Я включил версии, блок рендеринга и блоки стилей, которые, на мой взгляд, актуальны.
Я использую следующие версии (последние);
"expo": "^29.0.0",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
Для страницы входа код рендеринга выглядит следующим образом:
render() {
return (
<SafeAreaView style = {styles.flexContainer}>
<KeyboardAvoidingView
style = {styles.flexContainer}
behavior = "padding"
>
<Image style = {styles.image} source = {require('../../assets/images/backgroundWelcome.png')} role = "presentation" />
<View style = {styles.container}>
<View style = {[styles.row, styles.border]}>
<TextInput
placeholder='Email'
style = {styles.input}
onChangeText = {(input) => this.setState({email: input})}
value = {this.state.email}
/>
</View>
<View style = {[styles.row, styles.border]}>
<TextInput
placeholder='Password'
style = {styles.input}
secureTextEntry = {true}
onChangeText = {(input) => this.setState({password: input})}
value = {this.state.password}
/>
</View>
<View style = {styles.row}>
<StyledButton callback = {this.handleLogin} title='Log In'/>
</View>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
)
}
Это актуальные стили;
root: {
flex: 1,
alignItems: 'center',
backgroundColor: '#fff',
},
flexContainer: {
flex: 1,
},
container: {
paddingHorizontal: 40,
paddingBottom: 22,
alignItems: 'center',
flex: -1
},
row: {
flexDirection: 'row',
marginVertical: 10,
},
Я надеюсь, что приведенное ниже может пролить некоторое представление, если это так, пожалуйста, проголосуйте за.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
В конечном итоге я не смог найти полное решение вышеупомянутого напрямую, но я нашел модуль npm с именем.
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
Затем я вложил это в ScrollView и включил в него View и Form.
<ScrollView
<KeyboardAwareScrollView>
<View>
<!-- stuff -->
<View
<KeyboardAwareScrollView>
<ScrollView>
Модуль можно найти здесь;
реагировать на родную клавиатуру с учетом прокрутки просмотра
На момент написания статьи появился очень популярный модуль с ~ 30к скачиваний в неделю. Я не имею отношения к этому модулю, но он мне подходит.
У меня была такая же проблема с добавлением flex: 1 в KeyboardAvoidingView устранила мою проблему:
<KeyboardAvoidingView style = {{ flex: 1 }} behavior = {"padding"} >
<ScrollView >
<Card>
<CardItem header bordered>
<Text>Personal Information</Text>
</CardItem>
<CardItem bordered>
<Body>
<Item floatingLabel style = {styles.item}>
<Label>Full Name</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Headline</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Location</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Email</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
<Item floatingLabel style = {styles.item}>
<Label>Phone Number</Label>
<Input />
</Item>
</Body>
</CardItem>
</Card>
<ListItem>
<Left>
<Text>Make my Profile Public</Text>
</Left>
<Right>
<Switch value = {this.state.publicProfileRadioValue}
onValueChange = {(value) => this.setState({ publicProfileRadioValue: value })}
/>
</Right>
</ListItem>
</ScrollView>
</KeyboardAvoidingView>приглядевшись, вы увидите, что @dhj уже реализует KeyboardAvoidingView как {flex: 1}.
на самом деле нет, просто пропустите весь ответ и просто поняли, что вы в том же стиле с запрошенным кодом.
для всех, кто сталкивался с этим при тестировании на Android, убедитесь, что элемент, который вы хотите избежать клавиатуры, также имеет flex: 1.
так не пойдет:
<KeyboardAvoidingView
behavior = {Platform.OS == "ios" ? "padding" : "height"}
style = {{ flex: 1 }}
>
<TextInput style = {{ height: 300 }} />
</KeyboardAvoidingView>
это будет:
<KeyboardAvoidingView
behavior = {Platform.OS == "ios" ? "padding" : "height"}
style = {{ flex: 1 }}
>
<TextInput style = {{ flex: 1 }} />
</KeyboardAvoidingView>
без гибкости 1 целевой элемент не будет соответственно изменять размер своей высоты, чтобы избежать клавиатуры
Я мог бы добиться правильного поведения с помощью этой реализации:
- Удален компонент KeyboardAvoidingView.
- Добавил это в файл
app.json:
"android": {
"softwareKeyboardLayoutMode": "pan"
}
Надеюсь, это сработает и для вас, ребята!
Добавьте свойство minHeight в стиль корневого представления.
<KeyboardAvoidingView
behavior = {Platform.OS == 'ios' ? 'padding' : 'height'}
style = {styles.container}>
{//content }
</KeyboardAvoidingView>
minHeight: Math.round(Dimensions.get('window').height),
Не забудьте импортировать размеры из формы React Native
import { Dimensions } from 'react-native';
вы когда-нибудь исправляли это? Я тоже сталкиваюсь с такой проблемой. stackoverflow.com/questions/52112707/…