How to achieve 'FrameLayout' component in

Question

I know there is a 'View' component in React Native that acts like Android VieGroup, how ever it is more likely to work as LinearLayout - childrens are arranged in rows or columns.

I am wondering how to achieve 'FrameLayout' behavior - childrens are stacked in the layout, and each child can be assigned an unique gravity location.

For example: Put 5 childs into a component, each one of 4 childs are aligned to each corner of the layout, and the last child are aligned to center of the layout.

How to write React Native 'render' function?

Answer 1

That can be done using position: 'absolute' and align it top,left,right,bottom properties. Here is an working sample

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

Also on rnplay, https://rnplay.org/apps/n6JJHg