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

Question

我想创建一个fullsize -screen,其中包含在整个屏幕大小上呈现的子视图(视频播放器).我只得到当我通过明确其工作width,并height到组件.

但我知道有一个叫做" flex " 的属性.在许多教程中,他们执行类似"flex:1"的操作,但对我而言,它无处可做.

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

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