How to reach FrameLayout component in React Native?

Question

I know that in React Native there is a “View” component that acts like an Android VieGroup, it’s more likely that it works like LinearLayout - the children are in rows or columns.

I am wondering how to achieve “FrameLayout” behavior - children fit into the layout, and each child can be assigned a unique place of gravity.

For example: Place 5 children in a component, each of the 4 children aligned on each corner of the layout, and the last child aligned in the center of the layout.

How to write a React Native 'render' function?

Answer 1

This can be done using the position: "absolute" and align it from above, left, right, bottom. Here is a 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

Answer 2

You can overlay it in such a way as to import React, {Component} from "response"; import {Animated, View, StyleSheet, Easing, Text} from "act-native";

 class A extends Component { constructor(props) { super(props); this.animatedValue = new Animated.Value(0); } handleAnimation = () => { Animated.timing(this.animatedValue, { toValue: 1, duration: 500, easing: Easing.ease }).start(); }; render() { return ( <View style={styles.container}> <View style={styles.layer1} /> <View style={styles.overLay}> <Text>This is an overlay area</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 }, layer1: { height:100, backgroundColor: "lightgreen", }, overLay: { height: 100, width: "100%", backgroundColor: "#00000070", position: "absolute", } }); export default A;