React Native - Как добавить изображение в TextInput? - PullRequest
Новая
       21

React Native - Как добавить изображение в TextInput?

0 голосов
/ 04 июня 2019

Я хотел бы добавить 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

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Вот фрагмент кода, показывающий, как добавить значок изображения: 

       <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>
0 голосов
/ 04 июня 2019

Вы можете обернуть 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()} />
...