Question

我正在屏幕上使用本机库，并且我试图添加，但是由于键盘仍会隐藏文本输入而无法正常工作

  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;

我试图在表单标签内添加不同的视图，但仍然无法正常工作，我试图创建不同的表单标签，但失败了。

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

Answer 1

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

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',
    }

Answer 2

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>;

用本机基础反应本机键盘避免视图

2 个答案: