Question

我知道有一个＆＃39; View＆＃39; React Native中的组件，就像Android VieGroup一样，它更像是LinearLayout - 孩子们按行或列排列。

我想知道如何实现＆＃39; FrameLayout＆＃39;行为 - 儿童被堆积在布局中，每个孩子都可以被分配一个独特的重力位置。

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

如何编写React Native＆＃39;渲染＆＃39;功能

Answer 1

可以使用position：＆＃39; absolute＆＃39;并将其对齐顶部，左侧，右侧，底部属性。这是一个工作样本

'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

Answer 2

您可以通过这种方式进行叠加从“反应”中导入React，{组件}；从“ react-native”导入{Animated，View，StyleSheet，Easing，Text}；

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;

如何实现＆＃39; FrameLayout＆＃39; React Native中的组件？

2 个答案: