React-Native：如何在没有明确宽度和高度的情况下填充全屏？

Question

我想创建一个 fullsize 屏幕，其子视图（视频播放器）在整个屏幕上呈现。只有当我明确地将 width 和 height 传递给组件时，我才能让它工作。

但我知道有一个名为“flex”的属性。在许多教程中，他们会执行“flex: 1”之类的操作，但对我来说，它没有做它应该做的事情。

（为了完整起见，视频播放器不是问题的一部分。我也可以用<Image> 或其他类型的视图替换<video> 标签并获得相同的结果）

render() {
    const uri = this.props.uri
    return (
        <KeyboardAwareScrollView keyboardShouldPersistTaps="always" >
            <TouchableWithoutFeedback onPress={RouterActions.pop}>
                <Video source={{uri: uri}}   
                    ref={(ref) => {
                        this.player = ref
                    }}                       
                    style={s.fullsize} 

                />
            </TouchableWithoutFeedback>

            <TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
                <Icon name="times-circle-o" size={20} color="white" />
            </TouchableOpacity>


        </KeyboardAwareScrollView>
    )
}

我的风格：

这只有在我通过宽度和高度时才有效：

const s = StyleSheet.create({
  fullsize: {
    backgroundColor: 'black',
    //flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  closeBtn: {
      position: 'absolute',
      left: 20,
      top: 25, 
  },

});

我只尝试了这个，但是屏幕会是空的，因为 -Component 的宽度和高度都是 0。

const s = StyleSheet.create({
  fullsize: {
    backgroundColor: 'black',
    flex: 1,   // this is not working
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
});

Answer 1

我相信flex: 1 会占用它的父元素提供的所有空间。在你的情况下，你的父元素都没有任何样式，所以试试这个：

render() {
    const uri = this.props.uri
    return (
        <View style={{ flex: 1 }}>
            <TouchableWithoutFeedback style={{ flex: 1 }} onPress={RouterActions.pop}>
                <Video source={{uri: uri}}   
                    ref={(ref) => {
                        this.player = ref
                    }}                       
                    style={{ flex: 1 }} 

                />
            </TouchableWithoutFeedback>

            <TouchableOpacity onPress={RouterActions.pop} style={s.closeBtn}>
                <Icon name="times-circle-o" size={20} color="white" />
            </TouchableOpacity>
        </View>
    )
}