javascript - 试图从 mysql 数据库传递信息以做出本机反应

问题描述

我正在尝试使用 php 创建一个播客应用程序并做出本机反应。我已将每个应用程序的信息存储在 mysql 数据库中，并使用 php 运行查询以获取此信息。我已经使用 React Native Flatlist 在我的应用程序上显示了信息，并且我希望用户在播客名称上进行选项卡/单击，一旦它们被带到播放器屏幕，我希望从数据库中获取文件 url，具体取决于哪个播客被选中。

我是原生反应新手，所以我的代码可能不正确。

这是我的php代码。

<?php

include 'DBConfig.php';

$obj = json_decode($json,true);
 

$id = $obj['id'];
 
//Fetching the selected record.
$CheckSQL = "SELECT FileUrl FROM SermonsTable WHERE id='$id'";
 
$result = $con->query($CheckSQL);
 
if ($result->num_rows >0) {
 
 while($row[] = $result->fetch_assoc()) {
 
 $Item = $row;
 
 $json = json_encode($Item);
 
 }
 
}else {
	
 echo "No Results Found.";
 
}
 
echo $json;
 
$con->close();
?>

这是我的播放器屏幕的反应本机代码

const img_speaker = require('./resources/ui_speaker.png');
const img_pause = require('./resources/ui_pause.png');
const img_play = require('./resources/ui_play.png');
const img_playjumpleft = require('./resources/ui_playjumpleft.png');
const img_playjumpright = require('./resources/ui_playjumpright.png');


 export default class SecondActivity extends Component{
    static navigationOptions =
    {
       title: 'Sermons',
     
    };

    constructor(){
      super();
      this.state = {
          playState:'paused', //playing, paused
          playSeconds:0,
          duration:0,
          FileUrlHolder: ''
      }
      this.sliderEditing = false;
  }

  componentDidMount(){
      fetch('http://fbf7208d.ngrok.io/Filter.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
       
            // Getting the id.
            id: this.props.navigation.state.params.FlatListClickItemHolder
      })
    }).then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        FileUrlHolder : responseJson[3].FileUrl
      })
      
    }).catch((error) => {
      console.error(error);
    });
}

componentWillMount(){
      this.play();
      
      this.timeout = setInterval(() => {
          if(this.sound && this.sound.isLoaded() && this.state.playState == 'playing' && !this.sliderEditing){
              this.sound.getCurrentTime((seconds, isPlaying) => {
                  this.setState({playSeconds:seconds});
              })
          }
      }, 100);
  }

  componentWillUnmount(){
      if(this.sound){
          this.sound.release();
          this.sound = null;
      }
      if(this.timeout){
          clearInterval(this.timeout);
      }
  }

  onSliderEditStart = () => {
      this.sliderEditing = true;
  }
  onSliderEditEnd = () => {
      this.sliderEditing = false;
  }
  onSliderEditing = value => {
      if(this.sound){
          this.sound.setCurrentTime(value);
          this.setState({playSeconds:value});
      }
  }

  play = async () => {
      if(this.sound){
          this.sound.play(this.playComplete);
          this.setState({playState:'playing'});
      }else{

         
          this.sound = new Sound('' + this.state.FileUrlHolder, Sound.MAIN_BUNDLE, (error) => {
              if (error) {
                  console.log('failed to load the sound', error);
                  Alert.alert('Notice', 'audio file error. (Error code : 1)');
                  this.setState({playState:'paused'});
              }else{
                  this.setState({playState:'playing', duration:this.sound.getDuration()});
                  this.sound.play(this.playComplete);
              }
          });    
      }
  }
  playComplete = (success) => {
      if(this.sound){
          if (success) {
              console.log('successfully finished playing');
          } else {
              console.log('playback failed due to audio decoding errors');
              Alert.alert('Notice', 'audio file error. (Error code : 2)');
          }
          this.setState({playState:'paused', playSeconds:0});
          this.sound.setCurrentTime(0);
      }
  }

  pause = () => {
      if(this.sound){
          this.sound.pause();
      }

      this.setState({playState:'paused'});
  }

  jumpPrev15Seconds = () => {this.jumpSeconds(-15);}
  jumpNext15Seconds = () => {this.jumpSeconds(15);}
  jumpSeconds = (secsDelta) => {
      if(this.sound){
          this.sound.getCurrentTime((secs, isPlaying) => {
              let nextSecs = secs + secsDelta;
              if(nextSecs < 0) nextSecs = 0;
              else if(nextSecs > this.state.duration) nextSecs = this.state.duration;
              this.sound.setCurrentTime(nextSecs);
              this.setState({playSeconds:nextSecs});
          })
      }
  }

  getAudioTimeString(seconds){
      const h = parseInt(seconds/(60*60));
      const m = parseInt(seconds%(60*60)/60);
      const s = parseInt(seconds%60);

      return ((h<10?'0'+h:h) + ':' + (m<10?'0'+m:m) + ':' + (s<10?'0'+s:s));
  }

  render(){

      const currentTimeString = this.getAudioTimeString(this.state.playSeconds);
      const durationString = this.getAudioTimeString(this.state.duration);

      return (
          <View style={{flex:1, justifyContent:'center', backgroundColor:'black'}}>
              <Image source={img_speaker} style={{width:150, height:150, marginBottom:15, alignSelf:'center'}}/>
              <View style={{flexDirection:'row', justifyContent:'center', marginVertical:15}}>
                  <TouchableOpacity onPress={this.jumpPrev15Seconds} style={{justifyContent:'center'}}>
                      <Image source={img_playjumpleft} style={{width:30, height:30}}/>
                      <Text style={{position:'absolute', alignSelf:'center', marginTop:1, color:'white', fontSize:12}}>15</Text>
                  </TouchableOpacity>
                  {this.state.playState == 'playing' && 
                  <TouchableOpacity onPress={this.pause} style={{marginHorizontal:20}}>
                      <Image source={img_pause} style={{width:30, height:30}}/>
                  </TouchableOpacity>}
                  {this.state.playState == 'paused' && 
                  <TouchableOpacity onPress={this.play} style={{marginHorizontal:20}}>
                      <Image source={img_play} style={{width:30, height:30}}/>
                  </TouchableOpacity>}
                  <TouchableOpacity onPress={this.jumpNext15Seconds} style={{justifyContent:'center'}}>
                      <Image source={img_playjumpright} style={{width:30, height:30}}/>
                      <Text style={{position:'absolute', alignSelf:'center', marginTop:1, color:'white', fontSize:12}}>15</Text>
                  </TouchableOpacity>
              </View>
              <View style={{marginVertical:15, marginHorizontal:15, flexDirection:'row'}}>
                  <Text style={{color:'white', alignSelf:'center'}}>{currentTimeString}</Text>
                  <Slider
                      onTouchStart={this.onSliderEditStart}
                      onTouchEnd={this.onSliderEditEnd}
                      onValueChange={this.onSliderEditing}
                      value={this.state.playSeconds} maximumValue={this.state.duration} maximumTrackTintColor='gray' minimumTrackTintColor='white' thumbTintColor='white' 
                      style={{flex:1, alignSelf:'center', marginHorizontal:Platform.select({ios:5})}}/>
                  <Text style={{color:'white', alignSelf:'center'}}>{durationString}</Text>
              </View>
          </View>
      )
  }
}

当我使用代码在 iOS 中运行我的应用程序时，出现以下错误并且不确定原因。

标签： javascriptphpmysqlreactjsreact-native

javascript - 试图从 mysql 数据库传递信息以做出本机反应

问题描述

解决方案

推荐阅读