当键盘打开时，ScrollView 不会滚动到页面底部React Native

问题描述

我正在用 React Native 构建一个搜索组件，其中搜索栏 (textInput) 位于页面顶部，并且有一些预定义的搜索词以及一些其他内容包裹在滚动视图中并放置在搜索栏。

问题是：当键盘打开时scrollview没有滚动到页面底部。

我试过用KeyboardAvoidngView，把整个页面或者页面的下半部分包裹起来，各种配置，还是不行。我希望有人能在这里帮助我。这是我的代码结构和样式。

export default function SearchScreen() {
  return (
    <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
      <Container>
        <SearchBar />
        <Content showsverticalScrollIndicator={false}>
          <Section>
            <Text left medium bold>
              Trending Topics
            </Text>
            <List>
              {keywords.map((keyword) => (
                <Wrapper key={keyword.id}>
                  <Button
                    ghostdisabled
                    borderRadius={2}
                    label={keyword.name}
                    fontWeight="600"
                    fontSize={12}
                    textTransform="none"
                    onPress={() => alert('key pressed')}
                  />
                </Wrapper>
              ))}
            </List>
          </Section>
        </Content>
      </Container>
    </KeyboardAvoidingView>
  );
}

const Container = styled.View`
  padding: 0 16px;
  flex: 1;
`;

const Content = styled.ScrollView`
  flex: 1;
`;

const Section = styled.View`
  padding: 16px 0 8px;
`;

const List = styled.View`
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 16px;
`;

const Wrapper = styled.View`
  margin-right: 8px;
  margin-bottom: 8px;
`;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）