0

以下是一个简单的代码片段,它在屏幕顶部有一个静态标题和一个<TextInput>包装在视图容器中。输入在 android 和 ios 上都很好用。我面临的唯一问题是输入集中在 ios 上时出现的跳转。

注意:第一次输入焦点时,内容不会跳转。

跳跃内容.GIF

这是代码

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

export default function index() {
  return (
    <SafeAreaView style={{backgroundColor: 'grey', flex: 1}}>
      <View style={{width, height: height * 0.1, backgroundColor: 'red'}} />
  <KeyboardAvoidingView
    style={{position: 'absolute', bottom: 0}}
    behavior="position">
    <View style={{position: 'absolute', bottom: 0}}>
      <TextInput
        // secureTextEntry
        style={{
          width,
          backgroundColor: 'pink',
          height: height * 0.1,
          fontSize: width * 0.04,
          paddingLeft: 15,
        }}
        placeholder="Write message"
      />
    </View>
  </KeyboardAvoidingView>
</SafeAreaView>

); }

4

0 回答 0