#css #reactjs #react-native
Вопрос:
Я хочу разместить изображение поверх другого изображения, но на него не должен влиять параметр родительские изображения «содержат». Если я удалю ResizeMode=»contain» , он будет работать нормально, но в остальном он выглядит так:
Что я хочу, так это поместить маленькое изображение ВНУТРИ родительского изображения. На самом деле я хочу разместить маленькое изображение точно по углам. Не на пустом месте из-за ResizeMode=»содержать». Мой код выглядит так:
<PagerView style={styles.pager} initialPage={0} showPageIndicator>
<View style={styles.picView} key={i}>
<ImageBackground
resizeMode="contain"
style={styles.pic}
source={{
uri: post.contents[i].path,
}}
>
<Image
style={{ position: "absolute", height: 100, width: 100 }}
source={{
uri: post.contents[i].path,
}}
/>
</ImageBackground>
</View>
</PagerView>
Ответ №1:
Я надеюсь , что это сработает для вас, мне тоже пришлось сделать что-то подобное, поэтому я использовал вот так, и это сработало для меня.
<PagerView style={styles.pager} initialPage={0} showPageIndicator>
<View style={styles.container} key={i}>
<ImageBackground
resizeMode="contain"
style={styles.pic}
source={{
uri: post.contents[i].path,
}}
>
<View style={styles.container1}>
<Image
style={styles.image}
source={{
uri: post.contents[i].path,
}}
/>
</View>
</ImageBackground>
</View>
</PagerView>
const styles = StyleSheet.create({
container: {
flex: 1,
},
container1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
pic: {
flex: 1,
width: '100%',
},
});
Комментарии:
1. Какой компонент использует стиль container1? Я думаю, ты что-то упустил
2. Обновлен ответ @kutaykurt
3. Это не работает, маленькое изображение не отображается, потому что вы не дали никаких измерений стилю «изображение». Когда я даю ему свойства ширины и высоты и положение: абсолютное, он по-прежнему позиционирует себя в пустом пространстве