web-dev-qa-db-ja.com

Reactネイティブキーボードがボトムシートを画面外に押し出します/上へ

この問題に3週間以上取り組んでいます。パッケージosdnk/react-native-reanimated-bottom-sheetを使用しており、ボトムシート内でテキスト入力を使用したいと考えています。キーボードを開くと問題が発生。ボトムシートは画面から押し出されます。

これについてはすでにgithubの問題がありますが、誰もが問題を解決するようです。私以外？また、誰も私の質問に答えません。

私が試した手順：

  • Android.xml：Android:windowSoftInputMode="adjustPan"私はエキスポを使用していてエスケープしたくないので、Android.xmlファイルでソリューションを提供しないでください。
  • すべてのflex:1をheight:100%に置き換えました
  • ボトムシート/コンテンツ全体をラップしてさまざまなバリエーションを試しました
  • 100％で3番目のスナップポイントを作成し、入力フィールドがフォーカスされるとすぐにこのポイントにスナップしようとしました。ただし、これにより、下部シートが画面からはみ出します。
  • IOS正常に動作しています。

私のコードは次のようになります：（簡単に）

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

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

この奇妙な動作を修正するにはどうすればよいですか？例を挙げてください。 git-repo内で提供されている例を使用し、下部シート内のすべてをクリアして、単純なテキスト入力を追加するだけで十分です。

enter image description here

解決

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
androidreact-nativebottom-sheet
5
mleister

Android：windowSoftInputModeは （[〜＃〜] expo [〜＃〜]

参照

あなたはこのように完全な高さで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({});

enter image description here

1
Muhammad Numan