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

我想创建一个全尺寸屏幕,其中包含在整个屏幕尺寸上渲染的子视图(视频播放器).当我明确地将宽度和高度传递给组件时,我才能使它工作.

但我知道有一个叫做“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
  },});

解决方法

我相信做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>
    )
}