英文:
React native TextInput shifting other element outside of screen
问题
这里,我有一个View
组件,其中包含一个TextInput
和IconButton
,它们相邻放置。其中TextInput
由于flex-grow: 1
而占用最大可用宽度。
问题是当TextInput
内的文本增加到100%宽度或更多时,TextInput
变得更大并将IconButton
移出屏幕。
我正在使用react-native-paper。
<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: 2 }}>
<TextInput
value={msg.text}
onChangeText={(value) => setMsg({ ...msg, text: value })}
mode='outlined'
placeholder='Message'
outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
style={{ flexGrow: 1, marginBottom: 8 }}
right={<TextInput.Icon icon="camera" />}
/>
<IconButton
icon="send"
mode='contained'
iconColor='white'
containerColor='#167BD1'
size={24}
onPress={() => console.log('Pressed')}
/>
</View>
英文:
Here, I have a View
component inside of which there is a TextInput
and IconButton
adjacent to each other. Where the TextInput
takes the max width available because of flex-grow: 1
.
The problem is when the text inside of TextInput
has more increases to 100% width or more than that the TextInput
gets bigger and shifts the IconButton
outside of screen.
I'm using react-native-paper.
I'm providing two images for reference
<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', marginVertical: 2 }}>
<TextInput
value={msg.text}
onChangeText={(value) => setMsg({ ...msg, text: value })}
mode='outlined'
placeholder='Message'
outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
style={{ flexGrow: 1, marginBottom: 8 }}
right={<TextInput.Icon icon="camera" />}
/>
<IconButton
icon="send"
mode='contained'
iconColor='white'
containerColor='#167BD1'
size={24}
onPress={() => console.log('Pressed')}
/>
</View>
答案1
得分: 1
以下是代码的中文翻译部分:
import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
export default function App() {
const [message, setMessage] = useState('');
const handleButtonPress = () => {
alert('Message sent: ' + message);
setMessage('');
};
const handleChangeText = (text) => {
setMessage(text)
}
return (
<View style={styles.container}>
<TextInput
label="Message"
value={message}
onChangeText={handleChangeText}
style={styles.textInput}
/>
<Button mode="contained" onPress={handleButtonPress}>发送消息</Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
flexDirection: 'row',
alignItems: 'center',
},
textInput: {
flex: 1,
marginRight: 8,
},
});
在线演示:https://snack.expo.dev/@vasylnahuliak/76296165
英文:
Code:
import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput, Button } from 'react-native-paper';
export default function App() {
const [message, setMessage] = useState('');
const handleButtonPress = () => {
alert('Message sent: ' + message);
setMessage('');
};
const handleChangeText = (text) => {
setMessage(text)
}
return (
<View style={styles.container}>
<TextInput
label="Message"
value={message}
onChangeText={handleChangeText}
style={styles.textInput}
/>
<Button mode="contained" onPress={handleButtonPress}>🔥</Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
flexDirection: 'row',
alignItems: 'center',
},
textInput: {
flex: 1,
marginRight: 8,
},
});
Online playground: https://snack.expo.dev/@vasylnahuliak/76296165
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论