在React Native中,避免使用绝对定位的文本输入框可以通过使用布局组件来实现。下面是一个示例代码,演示如何使用布局组件来代替绝对定位的文本输入框。
import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
const App = () => {
const [text, setText] = useState('');
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
inputContainer: {
width: '80%',
height: 40,
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
},
input: {
flex: 1,
},
});
export default App;
在上面的示例中,我们使用了View
组件来创建一个容器,并设置了flex
样式,使其居中显示在屏幕上。然后,我们在容器内部创建了一个TextInput
组件,并使用inputContainer
样式设置了容器的宽度、高度、边框和内边距。最后,我们使用input
样式设置了TextInput
组件的flex
属性,使其可以自动调整宽度。
使用上述代码,你可以在React Native中创建一个避免使用绝对定位的文本输入框。