React native - Как отобразить одно время всплеск видео в реагировать родной?

Question

Я создаю проект, в котором у меня есть одноразовый заставочный видеоэкран, который используется для отображения некоторого вступительного видео приложения. После видео приложению необходимо загрузить экран входа, который уже создан. У него нет проблем с это, но не имею ни малейшего понятия, как сделать один раз заставку.

ваша помощь высоко ценится Спасибо

Answer 1

Раньше я не имел дело с видео в React Native, поэтому я не знаком с его возможностями по обработке видео, но просто гуглить реагирующее нативное видео возвращает библиотеку реагировать-нативное видео , в которой есть свойство onEnd. Как сказала Анис Д., это будет зависеть от вашей навигации и того, как вы храните свои данные, но если бы я использовал реагирующую навигацию для моей навигации, у меня был бы компонент, который отображается при запуске приложения, который проверяет, просматривали ли они video, возвращая компонент для отображения видео, если нет, в противном случае возвращает основной стек приложения, если так. Что-то вроде ниже

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

А в MyVideoComponent, который отображает видеопроигрыватель, в onEnd prop установите для переменной hasViewedVideo значение true. Если вам нужно показывать видео только один раз за установку, я бы посоветовал изучить избыточность и избыточность для сохранения этих данных. В противном случае, если видео необходимо показывать каждый раз при запуске приложения, было бы хорошо использовать состояние внутри исходного компонента, что будет выглядеть примерно так:

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 видеопроигрывателя.