React 本机键盘将 Bottomsheet 推出屏幕/顶部

Question

我已经为这个问题苦苦挣扎了三个多星期。我正在使用包 osdnk/react-native-reanimated-bottom-sheet，我想在 bottomsheet 中使用文本输入。打开键盘时出现问题。底部sheet被推出屏幕

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

我尝试的步骤：

Android.xml: android:windowSoftInputMode="adjustPan"我正在使用expo，不想越狱，所以请不要用Android.xml文件提供解决方案。
将所有 flex:1 替换为 height:100%
我尝试了不同的变体来包裹整个底部sheet/内容
尝试创建一个 100% 的第三个捕捉点，并在输入字段获得焦点后立即捕捉到该点。但是，这也会导致底部 sheet 超出屏幕范围。
在 IOS 上工作正常。

我的代码如下所示：（已简化）

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

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

如何解决这种奇怪的行为？请举个例子。只需使用 git-repo 中提供的示例就足够了，清除底部 sheet 中的所有内容并添加一个简单的文本输入。

解决方案

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

React 本机键盘将 Bottomsheet 推出屏幕/顶部

React native Keyboard pushes Bottomsheet out of screen / to top

android

react-native

bottom-sheet

解决方案