文章/答案/技术大牛

发布

社区首页 >问答首页 >React Native Keyboard避免使用Native base查看

问React Native Keyboard避免使用Native base查看
EN

Stack Overflow用户

提问于 2018-09-21 13:49:37

回答 2查看 2.1K关注 0票数 2

我在屏幕中使用原生基础，我试图添加，但它不能正常工作，因为键盘仍然隐藏文本输入

  render() {
    return (
      <Container>
          <Header style={styles.header}>
            <Left style={styles.left}>
              <TouchableOpacity
                style={styles.backArrow}
                onPress={() => this.props.navigation.navigate("Welcome")}
              >
                <FontAwesome
                  name={I18nManager.isRTL ? "angle-right" : "angle-left"}
                  size={30}
                  color="#6f6f6f"
                />
              </TouchableOpacity>
            </Left>
            <Body style={styles.body} />
            <Right style={styles.right} />
          </Header>
          <View style={styles.signuplogosec}>
            <Image source={Logo} style={styles.signuplogostyle} />
          </View>
          <KeyboardAvoidingView behavior="padding" enabled>
          <Form style={styles.form}>
          
            <Item rounded style={styles.inputStyle}>
              <Input
                //placeholderTextColor="#ffffff"
                textAlign={I18nManager.isRTL ? "right" : "left"}
                placeholder="First Name"
                onChangeText={(first_name) => { this.setState({ first_name }) }}
                style={styles.inputmain}
              />
            </Item>
            <Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
              <Input
                //placeholderTextColor="#ffffff"
                textAlign={I18nManager.isRTL ? "right" : "left"}
                placeholder="Last Name"
                style={styles.inputmain}
                onChangeText={(last_name) => { this.setState({ last_name }) }}
              />
            </Item>
            <Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
              <Input
                //placeholderTextColor="#ffffff"
                textAlign={I18nManager.isRTL ? "right" : "left"}
                placeholder="Email"
                style={styles.inputmain}
                autoCapitalize='none'
                onChangeText={(email) => { this.setState({ email }) }}
              />
            </Item>
            <Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
              <Input
                //placeholderTextColor="#ffffff"
                placeholder="Password"
                secureTextEntry={true}
                textAlign={I18nManager.isRTL ? "right" : "left"}
                style={styles.inputmain}
                onChangeText={(password) => { this.setState({ password }) }}
              />
            </Item>
            <Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
              <Input
                //placeholderTextColor="#ffffff"
                placeholder="Confirm Password"
                secureTextEntry={true}
                textAlign={I18nManager.isRTL ? "right" : "left"}
                style={styles.inputmain}
                onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
              />
            </Item>
            <TouchableOpacity
              info
              style={styles.signInbtn}
              onPress={this.signIn}
            >
              <Text autoCapitalize="words" style={styles.buttongetstarted}>
                Sign Up
              </Text>
            </TouchableOpacity>
          </Form>
          </KeyboardAvoidingView>
          <View style={styles.signupbottomView}>
            <TouchableOpacity
              style={styles.fbButton}
              onPress={() => alert("Facebook button Clicked")}
            >
              <View iconRight style={styles.fbview}>
                <Ionicons name="logo-linkedin" size={30} color="white" />
                <Text autoCapitalize="words" style={styles.fbButtonText}>
                  Sign Up with LinkedIn
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.signupbottomText}
              onPress={()=>{this.props.navigation.navigate('SignIn')}}>
              <Text style={styles.bottomText01}>
                Do you have an account?{" "}
                <Text style={styles.bottomText02}>Sign In</Text>
              </Text>
            </TouchableOpacity>
          </View>
        
      </Container>
    );
  }
}
export default SignUpScreen;

我试图在表单标签中添加不同的视图，但仍然不起作用，我试图创建不同的表单标签，但失败了。

我的需求很简单，我想在本机基础组件中使用KeyboardAvoidingView，我在某些地方出错了，但我不知道在哪里

javascript

react-native

回答 2

Stack Overflow用户

发布于 2020-01-21 02:39:33

只需使用behavior='position'从react-native导入KeyboardAvoidingView

import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View>
                <KeyboardAvoidingView behavior='position'>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                    <TextInput>Sample</TextInput>
                </KeyboardAvoidingView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    }

票数 2

Stack Overflow用户

发布于 2019-12-03 01:44:06

import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';

//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
    <Content>...</Content>
</KeyboardAvoidingView>;

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52437361

复制

相似问题

问React Native Keyboard避免使用Native base查看
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React Native Keyboard避免使用Native base查看EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React Native Keyboard避免使用Native base查看
EN