如何在React Native中实现'FrameLayout'组件？

Question

我知道React Native中有一个"View"组件,就像Android VieGroup一样,它更像是LinearLayout - 孩子们按行或列排列.

我想知道如何实现'FrameLayout'行为 - 在布局中堆叠儿童,并且可以为每个孩子分配一个独特的重力位置.

例如:将5个子项放入组件中,4个子项中的每一个都与布局的每个角对齐,最后一个子项与布局的中心对齐.

如何编写React Native"渲染"功能？

Answer 1

这可以使用position:'absolute'来完成,并将它对齐top,left,right,bottom属性.这是一个工作样本

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
                <Text style={styles.topLeft}> Top-Left</Text>
                <Text style={styles.topRight}> Top-Right</Text>
        <Text>Center</Text>
        <Text style={styles.bottomLeft}> Bottom-Left</Text>
        <Text style={styles.bottomRight}> Bottom-Right</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 24
  },
  topLeft:{
    position: 'absolute',
    left: 0,
    top: 0
  },
    topRight:{
    position: 'absolute',
    right: 0,
    top: 0
  },
    bottomLeft:{
    position: 'absolute',
    left: 0,
    bottom: 0
  },
    bottomRight:{
    position: 'absolute',
     right: 0,
    bottom: 0
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

同样在rnplay上,https: //rnplay.org/apps/n6JJHg