在切换按钮上反应本地播放声音

时间:2020-07-01 23:43:10

标签: javascript react-native audio

您好,我刚刚开始对本机做出反应,并获得了包含多文本的文本列表,点击后文本会更改

您可以尝试一下,它很好用

import React, { useState } from 'react';
import {
  View,
  Text,
  FlatList,
  SafeAreaView,
  TouchableOpacity,
  ImageBackground
} from 'react-native';
const ToggleButton = (props) => {
  const [isPressed, setIsPressed] = useState(false);
  const { sample, id, onPress, item1, item2 } = props;
  const text = isPressed ? item2.sample2 : item1.sample;

  return (
    <TouchableOpacity
      onPress={() => {
        setIsPressed(!isPressed);
        onPress && onPress();
      }}
      style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          width: '100%',
          height: 129,
          backgroundColor:'#E7C287',
          borderWidth: 1,
          marginTop:36,
          justifyContent: 'center',
          alignItems: 'center',
          padding:8
        }}>
        <Text style={{   fontSize: 14 }}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
  
};

const Myappp = () => {
  const data = [
    {sample:"My list1",id:"1"},
{sample:"My list2",id:"2"},
{sample:"My list3",id:"3"}, ];
  const data2 = [
    {sample2:"My changed list1",id:"1"},
    {sample2:"My changed list2",id:"2"},
    {sample2:"My changed list3",id:"3"}, ];
    
  

  return (
    
      <Text style={{marginTop:21,
    padding:16,
    marginBottom:27,
    fontSize:28,
    alignItems: 'center', 
    }}>My first try</Text>

      <FlatList
        data={data}
        renderItem={(entry) => {
          const { item } = entry;
          return (
            <ToggleButton
              item1={item}
              item2={data2.filter((_item) => _item.id === item.id)[0]}
            />
          );
        }}
        contentContainerStyle={{ padding: 20 }}
        ItemSeparatorComponent={() => {
          return <View style={{ flex: 1, height: 10 }} />;
        }}
        keyExtractor={(entry, index) => index.toString()}
      />
    
  );
  
};

export default Myappp;

我只想添加一些触摸声音,它将播放(如2秒)然后停止。“声音”文件夹中将有5-10 mp3。

我搜索了播放歌曲,但发现了它,但不知道如何合并。有人可以帮我吗。 谢谢

import Sound from 'react-native-sound';

const sound = new Sound('http://sounds.com/some-sound', null, (error) => {
                        //for my app , like ("./sounds/aaaa.mp3")
  if (error) {
    // do something
  }
  
  // play when loaded
  sound.play();
});

也有expo-av软件包,但我认为当我从android studio生成apk文件时,它不起作用

import { Audio } from 'expo-av';

try {
  const { sound: soundObject, status } = await Audio.Sound.createAsync(
    require('./assets/sounds/hello.mp3'),
    { shouldPlay: true }
  );
  // Your sound is playing!
} catch (error) {
  // An error occurred!
}

我怎么做

有人请帮助我

0 个答案:

没有答案
相关问题