React Native：如何设置子视图的高度与父视图相同，其中position = absolute？

Question

我想在父视图中显示两个子视图。两个孩子都有位置：“绝对”的风格，因为我想在视图的位置上应用一些动画。我想将视图的高度设置为等于父视图。如何在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