Пользовательская кнопка воспроизведения / паузы с React Native Video - Получение сообщения об ошибке JSON Value

Question

Я пытаюсь реализовать воспроизведение / паузу при нажатии всего видео.

const RenderItem = (props) => {
  const [paused, setPaused] = useState(true);
  return (
    <View>
      {props.is_video ? (
        <>
          <Video
            paused={paused}
            resizeMode="contain"
            source={{
              uri: props.mediaUrl,
            }}
          />
          <TouchableWithoutFeedback onPress={setPaused}>
            <Text>Play Darnit!</Text>
          </TouchableWithoutFeedback>
        </>
      ) : (
        <Image
          resizeMode="contain"
          source={{uri: props.mediaUrl}}
        />
      )}
    </View>
  );
};

Похоже, что нажатие на текст приводит к воспроизведению видео (я слышу звук), а затем быстро появляется сообщение об ошибке после:

JSON value '{
    "_dispatchInstances" = "<null>";
    "_dispatchListeners" = "<null>";
    "_targetInst" = "<null>";
    bubbles = "<null>";
    cancelable = "<null>";
    defaultPrevented = "<null>";
    dispatchConfig = "<null>";
    eventPhase = "<null>";
    isTrusted = "<null>";
    nativeEvent = "<null>";
    target = "<null>";
    type = "<null>";
}' of type NSMutableDictionary cannot be converted to BOOL

Кроме того, просто для Отметим, что этот RenderItem визуализируется в FlatList, где есть несколько видео. Я не уверен, должен ли я также сопоставить кнопку с нужным видео? Поэтому кнопка воспроизведения не может случайно воспроизвести другое видео или воспроизвести все видео одновременно.

Почему я получаю эту ошибку?

Answer 1

Ваш onPress просто вызывает setPaused, но вы не говорите ему, на что его устанавливать. Так что на данный момент он просто будет кормить родное событие из крана. и затем вежливо скажу вам, что упомянутое родное событие не является логическим.

Так что на вашем месте я создал бы функцию с именем togglePaused, которая переключает ваше состояние, а затем вызвал бы это в onPress, как .. .

const RenderItem = (props) => {
  const [paused, setPaused] = useState(true);

  const togglePaused = () => setPaused(prev => !prev) // add this toggle function

  return (
    <View>
      {props.is_video ? (
        <>
          <Video
            paused={paused}
            resizeMode="contain"
            source={{
              uri: props.mediaUrl,
            }}
            />
            {/* call togglePaused in the onPress prop  */}
          <TouchableWithoutFeedback onPress={togglePaused}>
            <Text>Play Darnit!</Text>
          </TouchableWithoutFeedback>
        </>
      ) : (
        <Image
          resizeMode="contain"
          source={{uri: props.mediaUrl}}
        />
      )}
    </View>
  );
};