Question

我想创建一个 fullsize 屏幕，其中包含在整个屏幕大小上呈现的子视图（视频播放器）。当我明确地将public class Booking { decimal price; decimal distance; public decimal Price { get { return price; } set { price = value; } } public decimal Distance { get { return distance; } set { distance = value; } } }和width传递给组件时，我才能使用它。

但我知道有一个名为“ flex ”的属性。在许多教程中，他们做了类似“flex：1”的内容，但对我而言，它无处可行。

（为了完整起见，视频播放器不是问题的一部分。我还可以将height标记替换为<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>
    )
}

我只尝试了这个，但是由于-Component的宽度和高度各为0，因此屏幕将为空。

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

});

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

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

1 个答案: