android - 如何在 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