如何在react-native中重疊圖像

Question

我有興趣在頭像（個人資料圖片）上創建一個自定義徽章，除了我似乎無法讓圖像重疊。 我嘗試使用'translateY'樣式轉換，但它被忽略，兩個圖像仍然並排放置，flex盒式，即使我希望它們重疊。 注意，我在示例中使用了Views，但我想象Images的工作方式相同。

'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);

Answer 1

我檢查您的代碼並進行一些更改以獲得預期的輸出。 更新的代碼是： -

'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);                                                                                                                                                            

請參閱上面代碼段中的更改。 輸出屏幕截圖鏈接： - https://drive.google.com/file/d/0B_8x_Jy7Ac9bbDh1eHhfelJpSmc/view?usp=sharing

每當您想要覆蓋任何反應組件時，只需將該組件放在另一個組件的啟動和關閉之間。 例如：-

如果你想在另一個圖像上重疊一個圖像，那么使用像

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

Answer 2

嵌套Image組件不再起作用。 您可以使用的是ImageBackground或絕對定位。

正如doc所說，你可以通過檢查ImageBackground的源代碼來編寫你自己的特定組件https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js