React Native：如何将子视图的高度设置为与位置=绝对的父视图相同？

Question

我想在父视图中显示两个子视图。两个孩子都有 position: "absolute" 的风格，因为我想在视图的位置上应用一些动画。我想将视图的高度设置为等于父视图。如何在 React Native 中实现这一点？

Answer 1

要让使用绝对位置的子视图与父视图具有相同的高度，您可以将它们的 top 和 bottom 位置设置为 0。

那么你仍然可以申请margin 或transform 来进一步改变他们的位置。

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.child1}/>
        <View style={styles.child2}/>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  child1: {
    position: 'absolute',
    backgroundColor: 'green',
    right: 0,
    top: 0,
    bottom: 0,
    width: 40,
  },
  child2: {
    position: 'absolute',
    backgroundColor: 'blue',
    left: 0,
    top: 0,
    bottom: 0,
    width: 40,
  },
});

现场观看：https://rnplay.org/apps/kSZnBg