javascript - 如何添加反应原生博览会 Av 搜索栏

Question

我正在使用 expo av 包在 react native expo cli 中构建一个音乐应用程序，我已经构建了播放和暂停等基本功能。现在我想实现搜索栏，但我不确定我该怎么做？

请看一下这段代码，请告诉我如何实现搜索栏

 const Controller = () => {
  const [sound, setSound] = useState();
  const [isPlaying, setisPlaying] = useState();
  const [currentIndex, setCurrentIndex] = useState(0);

  async function playSound() {
    console.log("Loading Sound");
    const source = { uri: audioBookPlaylist[currentIndex].uri };
    const { sound } = await Audio.Sound.createAsync(
      source,
      onPlaybackStatusUpdate
    );
    setSound(sound);
    setisPlaying(true);
    sound.playAsync();
    console.log("song loaded");
  }

  useEffect(() => {
    playSound();
    console.log(currentIndex);
  }, []);

  const Playpause = async () => {
    isPlaying ? await sound.pauseAsync() : await sound.playAsync();
    setisPlaying(!isPlaying);
    onPlaybackStatusUpdate();
    // console.log(status);
  };

  const handleNextTrack = async () => {
    if (sound) {
      await sound.unloadAsync(setisPlaying(!isPlaying));
      setCurrentIndex(
        currentIndex + 1 > audioBookPlaylist.length - 1 ? 0 : currentIndex + 1
      );
      await playSound();
    }
    elseif;
    console.log(currentIndex);
  };

  const handlePreviousTrack = async () => {
    if (sound) {
      await sound.unloadAsync(setisPlaying(false));
      setCurrentIndex(
        currentIndex === 0 ? audioBookPlaylist.length - 1 : currentIndex - 1
      );
      await playSound();
    }
    console.log(currentIndex);
    sound ? await sound.playAsync() : null;
  };

这是视图

return (
        <View style={style.container}>
          <View style={style.titlecontainer}>
            <Text style={style.title}>The Grid: Dat Punk</Text>
            <TouchableOpacity>
              <CsIcons name="Like" size={30} color="white" />
            </TouchableOpacity>
          </View>
          <Slider
            style={{ width: 200, height: 40 }}
            minimumValue={0}
            maximumValue={1}
            minimumTrackTintColor="#FFFFFF"
            maximumTrackTintColor="#000000"
          />
          <View style={style.controllers}>
            <TouchableOpacity>
              <CsIcons name="Shuffle" size={20} color="white" />
            </TouchableOpacity>
            <TouchableOpacity onPress={handlePreviousTrack}>
              <CsIcons name="Previous" size={50} color="white" />
            </TouchableOpacity>
            <TouchableOpacity onPress={Playpause}>
              {isPlaying ? (
                <CsIcons name="Peuse" size={80} color="white" />
              ) : (
                <CsIcons name="Play" size={80} color="white" />
              )}
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons
                name="Next"
                size={50}
                color="white"
                onPress={handleNextTrack}
              />
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons name="Repeat" size={20} color="white" />
            </TouchableOpacity>
          </View>
    
          <View style={style.bottomcontroller}>
            <TouchableOpacity>
              <CsIcons name="Share" size={20} color="white" />
            </TouchableOpacity>
            <TouchableOpacity>
              <CsIcons name="Sort-by" size={20} color="white" />
            </TouchableOpacity>
          </View>
        </View>
      );
    };

请帮我解决这个问题我该怎么做

谢谢

标签： javascriptreactjsreact-nativeexp