使用await / asnc时未重新渲染我的按钮

时间:2019-05-24 05:19:57

标签: react-native react-native-android

我是React Native的新手,正在学校做一个项目。我正在尝试使用react-native-audio-recorder-player和await / aysnc函数从url播放音频。一切正常,直到我要在用户等待从URL下载音频的同时显示加载程序(活动指示器)

我的解决方案是创建isLoading状态,当用户单击按钮时,在onPress函数中,我将isLoading的setState为true并为该setState添加回调以调用另一个异步函数。在该异步函数中,我将使用await从url获取音频,然后在将收到响应时,我将isLoading的setState为true。但是,即使isLoading状态为true,也不会重新渲染我的组件。我已经非常仔细地检查了componentWillUpdate,Render,componentDidUpdate。我的isLoading状态可以很好地展示我的组件。以下是我的代码,对不起我的英语不好。谢谢!

After so much of research the below code worked for me
Hope it may help you also
public static string GetRDSConnectionString()
        {
            string Database = "<yourdb>";
            string value = "";      
            string mysqlport = "3306";           
            uint sqlport = Convert.ToUInt32(mysqlport);
            string mysqlhostname = "<aws-hostname.com>";
            string ssh_host = "100.1.1.1";
            int ssh_port = 22;
            string ssh_user = "ubuntu";
            var keyFile = new PrivateKeyFile(@"C:\Automation\LCI\harvest-dev-kp.pem");
            var keyFiles = new[] { keyFile };
            var uname = "ubuntu";
            MySqlConnection con = null;
            MySqlDataReader reader = null;
            var methods = new List<AuthenticationMethod>();
            methods.Add(new PasswordAuthenticationMethod(uname, ""));
            methods.Add(new PrivateKeyAuthenticationMethod(uname, keyFiles));
            ConnectionInfo conInfo = new ConnectionInfo(ssh_host, ssh_port, ssh_user, methods.ToArray());
            conInfo.Timeout = TimeSpan.FromSeconds(1000);
            using (var client = new SshClient(conInfo))
            {
                try
                {
                    client.Connect();
                    if (client.IsConnected)
                    {
                        Console.WriteLine("SSH connection is active");
                    }
                    else
                    {
                        Console.WriteLine("SSH connection is inactive");
                    }
                    string Localport = "3306";
                    string hostport = "3306";
                    var portFwdL = new ForwardedPortLocal("127.0.0.1", Convert.ToUInt32(hostport), mysqlhostname, Convert.ToUInt32(Localport));
                    client.AddForwardedPort(portFwdL);
                    portFwdL.Start();
                    if (portFwdL.IsStarted)
                    {
                        Console.WriteLine("port forwarding is started");
                    }
                    else
                    {
                        Console.WriteLine("port forwarding failed");
                    }                    
                    string connectionstring = "Data Source=localhost;Initial Catalog=<DBNAME>I;User ID=<USERNAME>;Password=<PASSWORD>;SslMode=none";

                    con = new MySqlConnection(connectionstring);
                    MySqlCommand command = con.CreateCommand();
                    command.CommandText = "<YOUR QUERY>";
                    try
                    {
                        con.Open();
                    }
                    catch (Exception e)
                    {
                        Console.WriteLine(e.Message);
                    }
                    reader = command.ExecuteReader();
                    while (reader.Read())
                    {
                        value = reader["<db_col_name>"].ToString();

                    }
                    client.Disconnect();
                }
                catch (SocketException ex)
                {
                    Console.WriteLine(ex.Message);
                }
                finally
                {

                    Console.WriteLine("SSh Disconnect");
                }

            }

            //Console.ReadKey();
            return value;
        }
    }
    <View style={styles.parentViewStyle}
          <Button
            title='Click on me'
            onPress={()=>{     
              //set state for isloading true and call async function 
              this.setState({isLoading:true},()=>{this.play()
              });}}
          />
          //this text depends on the isLoading state.
          <Text>
            {this.state.isLoading?'is loading':'play'}
          </Text>
        </View>

1 个答案:

答案 0 :(得分:0)

第一个问题应该是您将函数置于匿名状态而从不启动它。要启动play()函数,您可以这样做:

this.setState({isLoading:true});
this.play();

第二个问题是await只是...等到sounder.startPlayer()的结尾。您可以这样做:

console.log('START');
await sounder.startPlayer("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");
console.log('END');

我不知道为什么等待不起作用...希望对您有帮助。

相关问题