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

Question

我想创建一个 fullsize 屏幕，其 subview (视频播放器)在整个屏幕上呈现。只有当我明确通过 width 时，它才会起作用和 height到组件。

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

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

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>
    )
}