Geek Answers Handbook

How to combine images in

I am interested in creating a custom icon on top of an avatar (profile image), except that I cannot make the images overlap. I tried using the "translateY" style transform, but it is ignored, and the two images are still placed next to each other, a flexible border style, although I want them to overlap. Notice I use Views in the example, but I think the images work the same.

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.avatar} /> <View style={styles.badge} /> </View> ); } }); var styles = StyleSheet.create({ container: { }, avatar: { backgroundColor: 'black', width: 60, height: 60, }, badge: { backgroundColor: 'red', width: 20, height: 20, translateY: -60, }, }); AppRegistry.registerComponent('SampleApp', () => SampleApp);
+7
source share
2 answers

I review your code and make some changes to get the expected result. Updated Code: -

 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.avatar}> <View style={styles.badge} /> </View> </View> ); } }); var styles = StyleSheet.create({ container: { }, avatar: { backgroundColor: 'black', width: 60, height: 60, }, badge: { backgroundColor: 'red', width: 20, height: 20, left: 20, top: 20, }, }); AppRegistry.registerComponent('SampleApp', () => SampleApp);

See the change above code snippet. Output link to screenshot: - https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

Whenever you want to redefine a component of a reaction, simply place that component between the beginning and closing of another component. For instance: -

If you want to overlay one image on another, use tags like

  <Image source={require('image!firstimage')} style={..}> <Image source={require('image!secondimage')} style={..}> </Image>
+11
source

Image nested components no longer work. ImageBackground this you can use ImageBackground or absolute positioning.

As the doctor says, you can code your own specific component by checking the source code of ImageBackground https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

0
source

More articles:


All Articles