React原生键盘将Bottomsheet从屏幕上推到顶部。

Question

我在这个问题上已经挣扎了三个多星期了。osdnk/react-native-reanimated-bottom-sheet 我想在底层表格中使用文本输入。问题出现在打开键盘时。底层表被推出屏幕外。

已经有一个关于这个问题的github问题，但似乎每个人都解决了这个问题。除了我？也没有人在那里回答我的问题。

我试过的步骤。

• Android. xml: android:windowSoftInputMode="adjustPan"我正在使用expo，不想逃避，所以请不要用Android.xml文件提供解决方案。
• 替换了所有 flex:1 与 height:100%
• 我尝试了不同的变化，将整个底层表的内容包裹起来。
• 尝试用100%创建第三个捕捉点，并在输入栏聚焦时捕捉到这个点。然而，这也会导致底层的工作表从屏幕上消失。
• 在IOS上，它工作得很好。

我的代码看起来像下面。(simplefied)

const renderInner = () => (
    <View>
        <FormTextInput/>
    </View>)

return (
<BottomSheet
        snapPoints={['100%']}
        renderContent={renderInner}
        renderHeader={renderHeader}
        initialSnap={0}
    />
)

如何修复这种奇怪的行为？请提供一个例子。只需使用git-repo中提供的一个例子，清除底层表的所有内容，并添加一个简单的文本输入即可。

解决方法

你的BottomSheet父容器应该有设备屏幕高度，而不是高度：100%。不需要使用 android:windowSoftInputMode="adjustPan".

import BottomSheet from 'reanimated-bottom-sheet'
import { View as Container, Dimensions } from 'react-native'

const { height } = Dimensions.get('window')


const Screen = () => (
  <Container style={{ height }}>
    {/* Your screen content here */}
    <BottomSheet {...yourBottomSheetParams} />
  </Container>
)

export default Screen

Answer 1

android:windowSoftInputMode 已在 博览会

转介

你必须像这样把BottomSheet包进全高的View中。

import React, { Component } from "react";
import { Text,TextInput, StyleSheet, View, Dimensions } from "react-native";
import BottomSheet from "reanimated-bottom-sheet";
const height = Dimensions.get("window").height;
export default class App extends Component {
  renderInner = () => (
    <View style={{ height: height,backgroundColor:"#eee00e"}}>
    <Text>This is Bottomsheet</Text>
      <TextInput style={{ backgroundColor: "blue",color:"#FFFFFF",marginTop:30 }} />
    </View>
  );
  render() {
    return (
      <View style={{ height: height,backgroundColor:"red"}}>
      <BottomSheet
        snapPoints={["60%"]}
        renderContent={this.renderInner}
        // renderHeader={renderHeader}
        initialSnap={0}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({});