android - KeyBoardAvoidingView 隐藏内容

Question

enter image description here

当前行为KeyBoardAvoidingView 隐藏了登录按钮。在 Android 和 iPhone 上都一样。在 Android 平板电脑上，它隐藏了登录按钮，但由于屏幕很大，您可以从顶部看到按钮。

预期行为当用户想要输入他的登录详细信息时，我希望底部的登录按钮移动到应用框架中。

App.js

import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import Login from './screens/Login';


class App extends React.Component {

  render() {
    return (
      <View 
          style={styles.container} >   

          <View style={styles.boxContainer}>
            <View style = {[styles.boxContainer, styles.boxOne]}>
              <Text style={styles.paragraph}>Tido</Text>
            </View>

              <View style={styles.boxContainerToggle}>
                <TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('Login')}>
                    <Text style={styles.paragraph}>Login</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.boxContainer, styles.boxThree]}>
                    <Text style={styles.paragraph}>Sign Up</Text>
                </TouchableOpacity>
              </View>          
          </View> 
      </View>   
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',

  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },

  boxContainerToggle: {
    flex: 1, 
    flexDirection: 'row'
  },
  boxOne: {
    flex: 6, // 5:6

    justifyContent: 'space-around',
    alignItems: 'center',

  },
  boxTwo: {
    flex: 1, // 1:6
    backgroundColor: 'powderblue',
    flexDirection: 'row',
    width: '50%',
    height: '100%'

  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%'
  },
  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  }, 
});

const appScreens = StackNavigator({
  Index: { screen: App },
  Login: { screen: Login }
})


AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;

登录.js

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


export default class Login extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
          <KeyboardAvoidingView behavior="padding" style={styles.container}>

                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="username,email or phone"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            secureTextEntry={true}
                            placeholder="password"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                              <Text style={styles.paragraph}>Login</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#FFFFFF',

      },
});

Answer 1

问题是，如果 KeyboardAvoidingView 的子项没有设置普通大小，则它无法正确应用填充。在这种特殊情况下，您需要确定屏幕尺寸并将屏幕高度(减去导航栏高度)应用于您的根 View 样式:

import { Dimensions } from 'react-native';

const { screenHeight: height } = Dimensions.get('window');
const styles = StyleSheet.create({
    ...
    containerContent: {
        height: screenHeight - navBarHeight,
        justifyContent: 'center',
    }
    ...
},

并将其应用到您的渲染方法中:

render() {
        return (
          <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <View style={styles.containerContent}>
                       ...
                </View>
          </KeyboardAvoidingView>
        );
}