带有 React Native 视频的自定义 Play/Pause 按钮 - 获取 JSON 值错误消息

Question

我正在尝试在按下整个视频时实现 play/pause。

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

带有 React Native 视频的自定义 Play/Pause 按钮 - 获取 JSON 值错误消息

Custom Play/Pause Button with React Native Video - Getting JSON Value Error Message

react-native

react-native-video