React Native的TextInput导致其他元素移出屏幕外。

huangapple go评论123阅读模式
英文:

React native TextInput shifting other element outside of screen

问题

这里,我有一个View组件,其中包含一个TextInputIconButton,它们相邻放置。其中TextInput由于flex-grow: 1而占用最大可用宽度。

问题是当TextInput内的文本增加到100%宽度或更多时,TextInput变得更大并将IconButton移出屏幕。

我正在使用react-native-paper。

我提供了两个参考图像:
React Native的TextInput导致其他元素移出屏幕外。
React Native的TextInput导致其他元素移出屏幕外。

<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 referenceReact Native的TextInput导致其他元素移出屏幕外。
React Native的TextInput导致其他元素移出屏幕外。

&lt;View style={{ width: &#39;100%&#39;, flexDirection: &#39;row&#39;, alignItems: &#39;center&#39;, marginVertical: 2 }}&gt;
        &lt;TextInput
          value={msg.text}
          onChangeText={(value) =&gt; setMsg({ ...msg, text: value })}
          mode=&#39;outlined&#39;
          placeholder=&#39;Message&#39;
          outlineStyle={{ borderRadius: 30, borderWidth: 0 }}
          style={{ flexGrow: 1, marginBottom: 8 }}
          right={&lt;TextInput.Icon icon=&quot;camera&quot; /&gt;}
        /&gt;

        &lt;IconButton
          icon=&quot;send&quot;
          mode=&#39;contained&#39;
          iconColor=&#39;white&#39;
          containerColor=&#39;#167BD1&#39;
          size={24}
          onPress={() =&gt; console.log(&#39;Pressed&#39;)}
        /&gt;
&lt;/View&gt;

答案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 &#39;react&#39;;
import { View, StyleSheet } from &#39;react-native&#39;;
import { TextInput, Button } from &#39;react-native-paper&#39;;

export default function App() {
  const [message, setMessage] = useState(&#39;&#39;);

  const handleButtonPress = () =&gt; {
    alert(&#39;Message sent: &#39; + message);
    setMessage(&#39;&#39;);
  };

  const handleChangeText = (text) =&gt; {
    setMessage(text)
  }

  return (
    &lt;View style={styles.container}&gt;
      &lt;TextInput
        label=&quot;Message&quot;
        value={message}
        onChangeText={handleChangeText}
        style={styles.textInput}
      /&gt;
      &lt;Button mode=&quot;contained&quot; onPress={handleButtonPress}&gt;&#128293;&lt;/Button&gt;
    &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    flexDirection: &#39;row&#39;,
    alignItems: &#39;center&#39;,
  },
  textInput: {
    flex: 1,
    marginRight: 8,
  },
});

Online playground: https://snack.expo.dev/@vasylnahuliak/76296165

huangapple
  • 本文由 发表于 2023年5月21日 00:15:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/76296165.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定