以下是一个简单的代码片段,它在屏幕顶部有一个静态标题和一个<TextInput>
包装在视图容器中。输入在 android 和 ios 上都很好用。我面临的唯一问题是输入集中在 ios 上时出现的跳转。
注意:第一次输入焦点时,内容不会跳转。
这是代码
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>
); }