Question

我想向image添加一个TextInput。就像Android的Spannable和IOS的NSAttributedString

<Text>
<Text> Test </ Text>
<Image source = {myImage} />
</Text>

我得到了想要的结果。

但是，它在TextInput中不可用。如果将<Image>或<Text>添加到TextInput [Object object]出现。

如何添加呢？

addImage = () => {
  const { content } = this.state;
  this.setState({
    content: content + <Image source={this.myImage} />
  })
}

<TextInput
  ref={(c) => { this.input = c; }}
  multiline
  style={[styles.inputStyle, { height: inputHeight }]}
  underlineColorAndroid="transparent"
  placeholder="PlaceHolder"
  placeholderTextColor="#BCBCBC"
  value={content}
  onChangeText={text => changeContent(text)}
  onContentSizeChange={event => changeInputHeight(event)}
 />
 <Button onPress={() => addImage()} />

相同的结果

<TextInput
      ref={(c) => { this.input = c; }}
      multiline
      style={[styles.inputStyle, { height: inputHeight }]}
      underlineColorAndroid="transparent"
      placeholder="PlaceHolder"
      placeholderTextColor="#BCBCBC"
      value={content}
      onChangeText={text => changeContent(text)}
      onContentSizeChange={event => changeInputHeight(event)}
     >
       <Text>
         {content}
       </Text>
     </TextInput
     <Button onPress={() => addImage()} />

我要说的是表情符号等内容之间的图像。它不是固定在左侧或右侧的图像。

这是React Native Bug https://github.com/facebook/react-native/issues/18566

Answer 1

您可以将commit_timestamp包裹在具有绝对位置的TextInput的视图中：

Image

Answer 2

以下是显示如何添加图像图标的代码摘录：

       <View style={styles.SectionStyle}>
      <Image
        //We are showing the Image from online
        source={{uri:'https://aboutreact.com/wp-content/uploads/2018/08/phone.png',}}

        //You can also show the image from you project directory like below
        //source={require('./Images/phone.png')}

        //Image Style
        style={styles.ImageStyle}
      />

      <TextInput
        style={{ flex: 1 }}
        placeholder="Enter Your Mobile No Here"
        underlineColorAndroid="transparent"
      />
    </View>

React Native-如何将图像添加到TextInput？

2 个答案: