Javascript 如何在React Native Expo中重新渲染组件

发布于07月09日

我有一个视频组件和EnterFullScreen函数，带有更改屏幕方向的逻辑，我想在更改屏幕方向后重新呈现视频组件，因为它在样式中有一个宽度属性.我试着使用Use-force-UPDATE和Change State，但没有帮助.

const {width, height} = Dimensions.get('window')
async function enterFullscreen() {
    if (!isFullscreen) {
        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE)
        // re-render here
    }
    else {
        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
        // re-render here
    }
}

video: {
  width: width,
  height: height,
  zIndex: 1
},

import { Video, ResizeMode } from 'expo-av';

<Video
    ref={video}
    style={styles.video}
    source={source}
    resizeMode={ResizeMode.CONTAIN}
    onReadyForDisplay={getDurationMillis}
    onPlaybackStatusUpdate={getPositionMillis}
    onLoad={() => {setIsLoading(false)}}
/>

Default

How it is(wrong)

How it should be

如果我进入全屏模式后按CTRL+S，视频有合适的宽度，如果我没有，它就像第二个截图如何重新呈现我的组件？

const { width, height } = Dimensions.get('window'); const styles = StyleSheet.create({ video: { width: width, height: height, zIndex: 1 }, }); const VideoComponent = () => { return ( <Video style={styles.video} // ...

const styles = StyleSheet.create({ video: { zIndex: 1 }, }); const VideoComponent = () => { const { width, height } = useWindowDimensions(); return ( <Video style={[styles.video, { width, height }]} // ...

Javascript 如何在React Native Expo中重新渲染组件

推荐答案

Javascript相关问答推荐

使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

JavaScript .Click()函数不起作用

创建私有JS出口

如何访问react路由v6加载器函数中的查询参数/搜索参数

如何在使用fast-xml-parser构建ML时包括属性值？

模块与独立组件

使用续集和下拉栏显示模型属性

如何修复我的js构建表每当我添加一个额外的列作为它的第一列？

在观察框架中搜索CSV数据

使用GraphQL查询Uniswap的ETH价格

制作钢琴模拟器，并且在控制台中不会执行或显示该脚本

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

禁用.js文件扩展名并从目录导入隐式根index.js时，找不到NodeJS导入模块

将Node.js包发布到GitHub包-错误ENEEDAUTH

让chart.js饼图中的一个切片变厚？

为什么在函数中添加粒子的速率大于删除粒子的速率？

如何根据查询结果重新排列日期

如何在AG-Grid文本字段中创建占位符

如何在FiRestore中的事务中使用getCountFromServer

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)？