如何在React Native中将按钮放在FormInput的右侧？

在React Native中将按钮放在FormInput的右侧，可以通过以下步骤实现：

1. 导入所需的组件和样式：import React from 'react'; import { View, TextInput, TouchableOpacity, Text } from 'react-native'; import { Icon } from 'react-native-elements';
2. 创建一个自定义组件，例如CustomInput：const CustomInput = ({ placeholder, onChangeText, value }) => { return ( <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder={placeholder} onChangeText={onChangeText} value={value} /> <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>按钮</Text> </TouchableOpacity> </View> ); };
3. 定义组件的样式：const styles = StyleSheet.create({ inputContainer: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: 'gray', borderRadius: 5, paddingHorizontal: 10, }, input: { flex: 1, height: 40, }, button: { backgroundColor: 'blue', paddingVertical: 10, paddingHorizontal: 15, borderRadius: 5, marginLeft: 10, }, buttonText: { color: 'white', fontWeight: 'bold', }, });
4. 在使用的地方，使用CustomInput组件并传入相应的属性：const App = () => { const [text, setText] = React.useState(''); const handleInputChange = (value) => { setText(value); }; return ( <View style={styles.container}> <CustomInput placeholder="输入内容" onChangeText={handleInputChange} value={text} /> </View> ); };

这样就可以将按钮放在FormInput的右侧。你可以根据需要自定义按钮的样式和功能。