React Native键盘将Bottomsheet推出屏幕/移至顶部

Question

我在这个问题上苦苦挣扎了三个多星期。 我正在使用软件包osdnk/react-native-reanimated-bottom-sheet，并且想在底部表单中使用textinputs。打开键盘时出现问题。底页被推出屏幕。

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

我尝试过的步骤：

• Android.xml：android:windowSoftInputMode="adjustPan"我正在使用expo，并且不想逃脱，所以请不要在Android.xml文件中提供解决方案。
• 将所有flex:1替换为height:100%
• 我尝试了将整个Bottomsheet / Content换行
• 试图创建具有100％的第三个捕捉点，并在输入字段聚焦后立即捕捉到该点。但是，这也会导致底部纸张在屏幕外发出蜂鸣声。
• 在IOS上工作正常。

我的代码如下：（简化）

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 已在EXPO

中可用

Referance

您必须像这样将BottomSheet包裹到全高视图中

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({});