Блог

Главная - Вопросы по программированию - Стиль изображения в текстовом компоненте в React Native

Стиль изображения в текстовом компоненте в React Native

#javascript #reactjs #react-native #flexbox

Вопрос:

Я пытаюсь создать стиль, который находится в текстовом компоненте. Насколько я читал на многих форумах, невозможно дать ему поле, ширину, высоту. То, что я в основном пытаюсь сделать, — это получить такой результат:

Желаемый результат

Дело в том, что если я оберну все в компонент представления в качестве родителя, изображение также будет немного выше текста, и я не смогу его стилизовать.

Любая помощь будет признательна! 🙂

Ответ №1:

Вы можете оформить изображение внутри текстового компонента, как показано ниже, и получить изображение, как на предоставленном вами рисунке

  <Text> Hello I am  
  <Image
      style={{   width: 30, 
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  {"Text after image" }

 </Text>

Комментарии:

1. Вот с какой проблемой я сталкиваюсь. Используя предоставленный вами код, я не могу изменить стиль изображения, чтобы оно было правильно вписано в текст. Я не могу привести, например, маржу. Вместо этого я получаю результат, подобный этой ссылке @RuchiTiwari

Ответ №2:

Для выравнивания вы также можете пойти этим путем

     <View
      style={{flexDirection: 'row',
      alignItems: 'center', justifyContent:"center"
      }}>
   <Text> {"Text before image"}</Text>
   <Image
      style={{   width: 30, alignSelf:"center",
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
   <Text> {"Text after image" }</Text>
   </View>

Результат, как в этой ссылке

Комментарии:

1. Если вы хотите использовать изображение в самом текстовом компоненте, вы можете попробовать стилизовать изображение с позицией:»абсолют», Надеюсь, это поможет <Стиль изображения={{ ширина: 30, позиция:»абсолют», высота: 30,}} источник={требуется(‘@expo/snack-статический/реагировать-родной логотип.png’)} />

2. Это решение работает. Но есть одна проблема. Поскольку каждый текст сам по себе является компонентом, они обрабатываются строка за строкой. Я хочу, чтобы это выглядело так, как будто все похоже на один текст.

Ответ №3:

Используйте ImageBackground.

  <Text> Hello I am  
  <ImageBackground>
      style={{   width: 30, 
        height: 30,}}
      source={require('@expo/snack-static/react-native-logo.png')}
     resizeMode="cover" style={styles.image}>

     <Text style={styles.text}>Inside</Text>

    </ImageBackground>
  {"Text after image" }

 </Text>

Читать документы

Ответ №4:

  <Text>Hello: I am{` `}
       <Image
         source={require('your image path')}
         style={{height: 20, width: 20}}
       />
       {` `}
       John Doe and I want to get a result like this with react-native
 </Text>

Комментарии:

1. Не могли бы вы объяснить свой ответ, пожалуйста?

Ответ №5:

Чтобы это выглядело как один текст, разместите результат по этой ссылке, дайте мне знать, если это сработает. Поля и межстрочный интервал в коде можно регулировать с помощью адаптивного размера экрана. Это поместили для справки

 <Text style={{lineHeight: 25,}}>Hello I am 

 <Image
 style={{width: 30, height: 30, marginStart:15, marginEnd:15, 
 marginTop:15, marginBottom:-8}}
  source={require('@expo/snack-static/react-native-logo.png')}
 />
 
<Text style={{lineHeight: 25,}}> Comments like this are just amazing. 
</Text>

</Text>

Комментарии:

1. К сожалению, радиус границы не работает на изображении, если оно является дочерним элементом текстового компонента. и я сталкиваюсь с проблемой, когда текст переносится перед завершением строки.

Метки: