0

我想添加一个image到TextInput. 像安卓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 错误 https://github.com/facebook/react-native/issues/18566

4

2 回答 2

0

您可以使用具有绝对定位的视图将您TextInput的视图包装起来：Image

<View style={{ flex: 1 }}>
  <Image
    source={this.myImage}
    style={{
      position: 'absolute',
      width: inputHeight,
      height: inputHeight,
      top: 0,
      right: 0,
    }}
  />
  <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)}
   />
 </View>
 <Button onPress={() => addImage()} />
于 2019-06-04T09:55:58.513 回答
0

这是一段代码摘录，展示了如何添加图像图标：

       <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>
于 2019-06-04T09:59:45.753 回答