web-dev-qa-db-ja.com

反応ネイティブでボタンがクリックされたときにローダーを表示する

反応ネイティブアプリにローダーアニメーションを実装しようとしていますが、ボタンをクリックしてもローダーがトリガーされません。ただし、アニメーションは既にtrueに変更されています。

以下の私のコードをチェックしてください。

componentWillMount(){
    this.hideLoader();
}

showLoader = () => { this.setState({ showLoader:true }); };
hideLoader = () => { this.setState({ showLoader:false }); };

doSignup = () => {
    this.showLoader();
}

render() {
    console.log(this.state.showLoader);
    return (
        <View>
            <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
              <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
                <Text style={{ fontSize: 20, color: Colors.white }}>Sign Up Now</Text>
              </View>
            </TouchableOpacity>

            <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}>
              <ActivityIndicator animating={this.state.showLoader} size="small" color="#00ff00" />
            </View>
        </View>
    );
}

画面が読み込まれると、ローダーのアニメーションをfalseに設定します。ボタンがクリックされたとき、trueに設定するだけでローダーをアニメーション化できますが、ローダーは表示されません。

javascriptreactjsreact-nativeloader
5
Leon

私はあなたのコードをその論理的な骨組みに単純化しようとしました。これがうまくいき、スタイリングなどを追加できるようになることを願っています。

export default class LoginButton extends Component {
  state = {
    isLoading: false
  };

  showLoader = () => {
    this.setState({ isLoading: true });
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.showLoader}>
          <Text>Sign Up Now</Text>
        </TouchableOpacity>
        <ActivityIndicator animating={this.state.isLoading} />
      </View>
    );
  }
}
2
gazdagergo

既存のコードをいくつか修正しました。

ここでいくつかの重要な変更について言及します。

  1. 構造を見る

  2. アクティビティインジケータービューでの位置

    constructor(props) {
  super(props);
  this.doSignup = this.doSignup.bind(this);
  this.state = {
    showLoader:false
  }
}
  showLoader = () => { this.setState({ showLoader:true }); };
  hideLoader = () => { this.setState({ showLoader:false }); };

 doSignup(){
   this.showLoader();
 }
render() {
  return (
     <View style={{flex:1}}>
        <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
          <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
           <Text style={{ fontSize: 20, color: "white" }}>Sign Up Now</Text>
        </View>
       </TouchableOpacity>

    <View style={{ position: 'absolute', top:"50%",right: 0, left: 0 }}>
      <ActivityIndicator animating={this.state.showLoader} size="large" color="red" />
    </View>
</View>
  );
 }
0
VISHAL RAWAT

問題はActivityIndi​​catorの位置にあります。

コンテナビューのスタイルを削除してみてください。ローダーが表示されます。

  <View>
     <ActivityIndicator animating={this.state.showLoader} size="small" 
        color="#00ff00" />
   </View>
0
Deepak