Question

我遇到一个有关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。

我在这里想念什么？

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

Answer 2

好，所以我将视图高度设置为占据整个窗口，但是无论如何the 5th item remains hidden，KeyboardAvoidingView仍无法正常工作。 keyboardVericalOffset参数不起作用，我可以手动滚动以显示最后一个项目just fine。我需要做些什么才能使其正确？

Answer 3

我所做的是使用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>

在Flex中查看：1无法扩展到最高高度，KeyboardAvoidingView无法正常工作

3 个答案: