React-Native：按下鍵盤 (textInput) 會導致 header 滑出屏幕。 怎么能保持在同一個position？

Question

目前，我在按下文本輸入后以這種方式獲取頁面（注意沒有 header，因為它已從屏幕中彈出）：

我希望它是這樣的（即使我按下文本輸入，HEADER 也應該保持在相同的位置）：

我在 android 清單中使用它：

android:windowSoftInputMode="adjustPan"

這是我的代碼：

import React from 'react';
import {
  View,
  Dimensions,
  TextInput,
  ScrollView,
  StatusBar,
  Text,
  KeyboardAvoidingView,
} from 'react-native';
const {width, height} = Dimensions.get('window');

const Conversation = ({}) => {
  return (
    <>
      <StatusBar hidden />
      <View
        style={{
          backgroundColor: 'gray',
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text center style={{color: 'white'}}>
          Header
        </Text>
      </View>

      <KeyboardAvoidingView behavior="padding" style={{flex:1}}>
        <TextInput
          style={{
            backgroundColor: 'white',
            borderWidth: 1,
            height: 50,
            marginHorizontal: width * 0.1,
            top: height * 0.9,
          }}
        />
      </KeyboardAvoidingView>
    </>
  );
};

export default Conversation;

Answer 1

您只需要刪除top: height * 0.9並將您的內容放在 ScrollView 中。

import React from 'react';
import {
     View,
     Dimensions,
     TextInput,
     ScrollView,
     StatusBar,
     Text,
     FlatList,
     KeyboardAvoidingView,
} from 'react-native';
const { width, height } = Dimensions.get('window');

const Conversation = ({ }) => {
return (
<>
  <StatusBar hidden />
  <View
    style={{
      backgroundColor: 'gray',
      height: 50,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Text center style={{ color: 'white' }}>
      Header
    </Text>
  </View>

  <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
    <ScrollView>

    </ScrollView>
    <TextInput
      style={{
        backgroundColor: 'white',
        borderWidth: 1,
        height: 50,
        marginHorizontal: width * 0.1
      }}
    />
  </KeyboardAvoidingView>
</>
);
};

export default Conversation