在 flex 中查看：1 未扩展到全高，KeyboardAvoidingView 无法正常工作答案

【问题标题】：View in flex: 1 not expanding to full height, KeyboardAvoidingView not working properly在 flex 中查看：1 未扩展到全高，KeyboardAvoidingView 无法正常工作
【发布时间】：2018-06-20 19:11:04
【问题描述】：

我遇到了一个关于 ScrollView 的问题，它没有占据剩余的全部高度，like so。

带有红色边框的视图应该一直向下，因此当键盘退出时视图向上不够and the 5th item is selected。

这是我的这个组件的代码：

    <Container>
      <Header navigation={this.props.navigation} title="Header" />
        <ScrollView style={{
          flexGrow: 1,
          borderColor: '#F00',
          borderWidth: 1,
        }}>
          <KeyboardAvoidingView behaviour="padding" keyboardVerticalOffset={50} style={{
            flex: 1,
          }}>
            <InputWithLabel label="1st item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="2nd item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="3rd item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="4th item" editable={true} onTextChange={this.textChange} />
            <InputWithLabel label="5th item" editable={true} onTextChange={this.textChange} />
          </KeyboardAvoidingView>

        </ScrollView>
    </Container>

这是我的根组件，我也使用 react-navigation 来显示我的组件：

      <Root>
        <StatusBar translucent={false} barStyle="light-content" />
        <Provider store={store}>
          <AppRoot/>
        </Provider>
      </Root>

我尝试弄乱了 keyboardVerticalOffset 参数，但在我的情况下它似乎没有做任何事情。我还尝试在滚动视图上放置“flex: 1”而不是“flexGrow: 1”，但是this is the result。

我在这里错过了什么？

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

import {
  Dimensions,  // <--- this
  ...
} from 'react-native'

const { height } = Dimensions.get('window')  // <--- this

<Container>
  <Header navigation={this.props.navigation} title="Header" />
    <ScrollView style={{
      flexGrow: 1,
      borderColor: '#F00',
      borderWidth: 1,
    }}>
      <KeyboardAvoidingView behaviour="padding" keyboardVerticalOffset={50} style={{
        flex: 1,
      }}>
         <View style={{ minHeight: height }}>      // <--- this
           <InputWithLabel label="1st item" editable={true} onTextChange={this.textChange} />
           <InputWithLabel label="2nd item" editable={true} onTextChange={this.textChange} />
           <InputWithLabel label="3rd item" editable={true} onTextChange={this.textChange} />
           <InputWithLabel label="4th item" editable={true} onTextChange={this.textChange} />
           <InputWithLabel label="5th item" editable={true} onTextChange={this.textChange} />
        </View>
      </KeyboardAvoidingView>

    </ScrollView>
</Container>

【讨论】：

没有其他方法可以实现这一点吗？当 flex: 1 应该按照我想要的方式扩展内容时，给内容设置一个固定的高度感觉有点不对。
您可以尝试将contentContainerStyle={{ flexGrow: 1}}添加到ScrollView

【解决方案2】：

我所做的是使用 KeyboardAvoidingView 增加表单的弹性，我使用了 behavior="position" 因为其他的都不起作用。

例如：

import React from "react";
import Wrapper from "../../components/auth/authBackWrapper";
import SignInTitle from "../../components/auth/signIn/signInTitle";
import SignInForm from "../../components/auth/signIn/signInForm";
import SignInLinks from "../../components/auth/signIn/signInLinks";
import SignInButton from "../../components/auth/signIn/SignInButton";
import { Content } from "../../components/commonStyledComponents/commonStyledComponents";

import styled from "styled-components/native";

const KeyboarAvoid = styled.KeyboardAvoidingView`
    flex: 2.4;
`;

export default ({ }) =>
    <Wrapper>
        <Content p={20}>
            <SignInTitle />
            <KeyboarAvoid behavior='position'>
                <SignInForm />
            </KeyboarAvoid>
            <SignInButton />
            <SignInLinks />
        </Content>
    </Wrapper>

【讨论】：