- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 react native 和 Expo 开发一个应用程序,但我在 Android 上遇到了键盘问题。当键盘弹出时,它会将 View 向上推太多,导致标题在中间被切掉。在iOS上没问题。我想实现相同的行为..
我查看了文档,但它说 Android 会自动处理它。但它没有这样做:/
这是我的代码:
render() {
const { erroLogin, logando } = this.props;
return (
<ImageBackground style={styles.container} source={backgroundImage}>
<KeyboardAvoidingView
style={styles.keyboardViewContainer}
behavior={Platform.OS === 'ios' ? 'padding' : null}
>
<Text
style={{
fontFamily: 'roboto-bold',
color: '#ffffff',
fontSize: 48,
marginBottom: 20.7 * 3,
}}
>
Balad<Text style={{ fontFamily: 'roboto-light', color: '#ffffff', fontSize: 48 }}>APP</Text>
</Text>
<TextInput
value={this.state.email}
placeholder="Usuário"
style={[styles.input, { marginBottom: 4 * 3 }]}
placeholderTextColor="#828282"
maxLength={255}
autoCorrect={false}
keyboardType="email-address"
autoCapitalize="none"
returnKeyType="done"
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ email: text })}
/>
<TextInput
value={this.state.senha}
placeholder="Senha"
style={styles.input}
placeholderTextColor="#828282"
maxLength={255}
autoCorrect={false}
autoCapitalize="none"
returnKeyType="done"
secureTextEntry
underlineColorAndroid="transparent"
onChangeText={text => this.setState({ senha: text })}
/>
<View style={styles.esqueceuView}>
<TouchableOpacity onPress={this.esqueciMinhaSenha}>
<Text style={styles.esqueceuSenha}>Esqueceu a senha?</Text>
</TouchableOpacity>
</View>
<CustomCheckBox style={styles.continuarConectadoView} onValueChange={this.switch} value={this.state.continuarConectado}>
<Text style={styles.continuarConectadoText}>Manter conectado</Text>
</CustomCheckBox>
<View style={{ height: 20 * 3, width: '80%' }}>
<Button
title="ACESSAR SISTEMA"
onPress={() => this.fazerLogin()}
titleStyle={styles.buttonText}
buttonStyle={styles.button}
loading={logando}
/>
</View>
</KeyboardAvoidingView>
{erroLogin && (
<View style={{ width: '80%', height: '10%', borderRadius: 1.7 * 3, marginTop: '5%' }}>
<ErrorBox
defaultMessage={
erroLogin.response.status === 401
? 'Email ou senha incorretos'
: 'Ops, houve um erro. Tente novamente'
}
/>
</View>
)}
<Text style={styles.versao}>{Constants.manifest.version}v</Text>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
keyboardViewContainer: {
width: '100%',
alignItems: 'center'
},
input: {
width: '80%',
height: 16.7 * 3,
borderRadius: 1.7 * 3,
fontSize: 4.7 * 3,
fontFamily: 'roboto-medium-500',
backgroundColor: '#ffffff',
paddingHorizontal: 6 * 3,
},
esqueceuView: {
width: '80%',
},
esqueceuSenha: {
fontFamily: 'roboto-medium-500',
letterSpacing: 0,
color: '#ffffff',
fontSize: 5 * 3,
marginTop: 8 * 3,
marginBottom: 8 * 3,
},
buttonText: {
fontFamily: 'roboto-medium-500',
color: '#ffffff',
fontSize: 4.7 * 3,
},
button: {
borderRadius: 1.7 * 3,
backgroundColor: '#de0059',
},
continuarConectadoView: {
flexDirection: 'row',
width: '80%'
// justifyContent: 'space-between'
},
continuarConectadoText: {
fontFamily: 'roboto-medium-500',
letterSpacing: 0,
color: '#ffffff',
fontSize: 5 * 3,
marginTop: 2 * 3,
marginBottom: 8 * 3,
marginLeft: 3 * 3
},
versao: {
color: '#ffffff',
fontFamily: 'roboto-regular',
fontSize: 16,
position: 'absolute',
top: '90%'
}
});
最佳答案
我在世博论坛上发布了这个问题,我得到了答案。
我所要做的就是将 KeyboardAvoidView 中的内容包装在 ScrollView 中并且它起作用了。仍在试图弄清楚为什么这是必要的,因为文档没有对此进行任何说明。
无论如何,这是答案的链接https://forums.expo.io/t/problems-with-keyboardavoidview/7799
我希望它可以帮助其他人。
关于react-native - 键盘在 React Native 博览会上向上推 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49225253/
ios build on expo cli 失败,出现以下错误 PS C:\Users\Sarath.N15\IdeaProjects\face-app> expo build:ios ┌──────
我正在使用EXPO和React Native为Android和iOS创建一个应用程序。 此代码中有一个奇怪的行为:它在Expo App上可以正常工作,但在真实设备(独立版本)(在iOS和Android
我正在用react-native创建一个应用程序。我在应用程序中遇到问题。我正在从服务器获取数据并使用获取的数据更新我的状态。来自服务器的数据是控制台记录,没有任何错误。然而,在设置状态后,react
我使用 expo 创建了一个 react-native 应用程序.现在我正在寻找应用程序的共享扩展,以将 CSV 数据从电子邮件附件导入我的应用程序。 我试过 npm package但这对我不起作用(
我正在使用带有 expo 的 react native,我正在尝试通过 fetch api 发布 blob 图像。我正在为正文使用表单数据格式,并且我有下一个代码: const blob
正在处理这个登录页面,我必须在“已经有帐户?请登录!”文本上使用 TouchableOpacity将我发送到歌唱屏幕,由于某种原因它不起作用,所以很自然地我认为我的代码中有错误,经过几个小时的调试后,
我在我的应用程序中使用 axios。当我在打开应用程序后第一次发出帖子请求时,它失败并出现以下错误。从第二次开始,它可以正常工作。 Network Error - node_modules/axios
我将 Expo 与 React Native 结合使用,在 Galaxy S8+ 上的 Android 模拟器上进行测试。 我正在使用 Video来自 Expo 库的组件,因为我无法获得 react-
我已经弹出了世博会的项目。 更改 info.plist 后,现在我可以让我的应用程序出现在“使用应用程序列表打开”列表中,并且实际上可以使用我的 expo(React native 应用程序)打开该文
我试图限制可以由 Expo.DocumentPicker.getDocumentAsync 选择的文件类型,但没有成功。 如何一次过滤多个 mimeType? 我已经尝试如下: Expo.Docume
借助“MaterialTopTabNavigator”,我的应用程序允许用户通过简单的手指滑动从一个选项卡移动到另一个选项卡。我希望能够使用“StackNavigator”在某些选项卡重定向按钮上提出
我正在使用 react native(expo) 并尝试使用 web View package 我在控制台中收到此警告,但在移动屏幕上没有看到任何内容。 "sdkVersion": "36.0.0",
我在文档中的任何地方都找不到这个问题的答案。 我可以使用 exponentPushToken[xxxxx] token 向独立(非分离)应用程序发送推送通知吗?也许使用 expo 的推送服务 URL
我正在构建一个最近搬到 expo 的 react native 应用程序。该应用程序似乎显示了预期的屏幕,但在它完成之前,我收到以下错误消息:console.error:“向您的开发环境发送日志消息时
我一直在尝试将 tailwindcss 集成到我的 react native expo 项目中,当我在 App.js 中应用 tailwind classNames 时它工作正常,但是当我向它添加 r
打开 map 屏幕时如何使 map 居中以显示用户当前位置?按照expo文档,应该是用Expo Location API来实现吧?然而,文档并不清楚。我从世博会位置文档中获取了部分代码,并在我的 ma
当我用 expo 打开开发者菜单时,它显示: 实时重新加载不可用 和 热重载不可用 我已根据需要登录,我也尝试过使用二维码加载应用程序,但没有帮助。 .expo/settings.json: {
我有一个在 React Native 中构建的应用程序,其中我有一个模式,当按下按钮时会出现并提示用户输入。我已经使用我现在使用的相同方法在应用程序中制作了其他可以正常工作的模态。但是当我改变这个决定
我正在设置一个页面,我可以在其中使用 Google 帐户进行身份验证。这是我的代码: import React from "react" import { StyleSheet, Text, View
有办法查看文件系统的内容并从中删除内容吗? 我在世博文件系统中有数据,我需要: 查看文件系统内部,因为我不知道如何找到这个文件,因为我使用带有二维码扫描的 expo 客户端 sdk,并且我不明白如何在
我是一名优秀的程序员,十分优秀!