Я пытаюсь создать компонент часов с изображением лица и стрелкой с центром на часах в React Native. не позволяет встраивать другие изображения. Я нашел несколько сообщений для центрирования текста по изображениям, но не могу найти способ центрировать изображение по изображениям.

Изменить: я пытаюсь найти способ, позволяющий избежать абсолютного положения, чтобы компонент мог динамически изменяться.

1
BenBtg 5 Янв 2018 в 16:29

2 ответа

Лучший ответ

Если я правильно понял, вы хотите показать одно изображение поверх другого. Одно изображение является родительским, а другое - дочерним без использования абсолютной позиции. Для этого вы можете использовать компонент ImageBackground , предоставленный react-native, и установив его высоту и ширину с процентным значением.

Ниже приведен пример:

Родительское изображение : Clock.png - это компонент фона изображения .

Дочернее изображение : Needle.png - это компонент изображения .

import React, { Component } from 'react'
import { StyleSheet, View, Text, ImageBackground, Image } from 'react-native'

export default class ImageView extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1
        }}
      >
        <View
          style={{
            flex: 0.25,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'red'
          }}
        >
          <Text style={{ color: 'white', fontSize: 26 }}>I am Header</Text>
        </View>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            // backgroundColor: 'blue',
            borderWidth: 1,
            borderColor: 'red'
          }}
        >
          <ImageBackground
            source={require('@assets/Clock.png')}
            style={{
              height: '60%',
              width: '100%'
            }}
            resizeMode="contain"
          >
            <Image
              style={{
                marginTop: '4.5%',
                alignSelf: 'center',
                height: '30%',
                width: '100%'
              }}
              resizeMode="contain"
              source={require('@assets/Needle.png')}
            />
          </ImageBackground>
        </View>
      </View>
    )
  }
}

Clock

6
Ayush Nawani 10 Июл 2018 в 17:45

То же, что и в обычном старом HTML, CSS.

Используйте position:absolute и выровняйте элементы так, чтобы они соответствовали вашим ожиданиям.

0
Sten Muchow 5 Янв 2018 в 13:38