Question

我正在创建一个项目，其中有一个一次性启动视频屏幕，该屏幕用于显示应用程序的一些介绍视频。视频播放后，应用程序需要加载已创建的登录屏幕。那但是没有任何线索如何做一次启动画面。

非常感谢您的帮助谢谢

Answer 1

我以前没有在React Native中处理视频，所以我不熟悉它处理视频的功能，但是只是谷歌搜索react本机视频会返回react-native-video library，它具有onEnd道具。就像Anis D所说的那样，这取决于您的导航以及如何存储数据，但是如果是我使用react-navigation进行导航，则我将拥有一个在应用启动时呈现的组件，用于检查他们是否查看了视频，如果不显示则返回该组件以显示视频，否则返回主应用程序堆栈。如下

class App extends Component {
  render() {
     if (!this.props.hasViewedVideo) {
        return <MyVideoComponent/>
     }
     return <MainApplicationStack/>
  }
}

并在呈现视频播放器的MyVideoComponent中，在onEnd道具上，将hasViewedVideo变量设置为true。如果您每次安装仅需要显示一次视频，则建议您查看redux，然后redux继续存储此数据。否则，如果需要在每次启动应用程序时显示视频，则可以使用初始组件内的状态，这看起来像下面的样子

class App extends Component {
  state = {
    hasViewedVideo: false
  }

  render() {
     if (!this.state.hasViewedVideo) {
        return <MyVideoComponent/>
     }
     return <MainApplicationStack/>
  }
}

使用异步存储，可能看起来像这样

class App extends Component {
  state = {
    hasViewedVideo: false 
  }

  componentDidMount = async () => {
    const hasViewedVideo = await AsyncStorage.getItem('hasViewedVideo')
    this.setState({ hasViewedVideo })
  }

  onVideoEnd = async () => {
    await AsyncStorage.setItem('hasViewedVideo', true)
    this.setState({ hasViewedVideo: true})
  }

  render() {
     if (!this.state.hasViewedVideo) {
        return <MyVideoComponent onVideoEnd={this.onVideoEnd}/>
     }
     return <MainApplicationStack/>
  }
}

将onVideoEnd属性传递到子MyVideoComponent组件中，并在视频播放器的onEnd属性中使用它。

React native-如何在react native中显示一次性视频？

1 个答案: