RN中通过 callback 改变 state

Introduction:

    TestNetwork中有两个按钮，点击后在testNetworkModel中请求到数据后，通过callback回传，改变state并显示。

class testNetworkModel {

    constructor(codeCallback, mailCallback) {

        this.cCallback = codeCallback;  // 验证码图片的回调

        this.eCallback = mailCallback;  // 邮箱信息的回调

    }

    cCallback:Function = null;

    eCallback:Function = null;

    getCheckCode = () => {

        NetWorkTool.getCheckCode(

            (res) => {

                if (res && res.data && res.data.captcha) {

                    if (this.cCallback && typeof this.cCallback === 'function') {

                        this.cCallback(res.data.captcha);

                    }

                }

            }, (err) => {

                console.log('code err:', err);

            }

        )

    };

    getUserInfo = (token) => {

        NetWorkTool.getUserInfo(token, (res) => {

            if (res && res.data.user.email) {

                if (this.eCallback && typeof this.eCallback === 'function') {

                    this.eCallback(res.data.user.email);

                }

            }

        }, (err) => {

            console.log(err);

        });

    };

}

export default class TestNetwork extends Component {

    constructor(props) {

        super(props);

        this.model = new testNetworkModel(this.getImage, this.getUserEmail);

        this.state = {

            imageUrl: '',

            userEmail: '',

        };

    }

    model = null;

    getImage = (sourceUrl) => {

        this.setState({

            imageUrl: sourceUrl,

        });

    };

    getUserEmail = (email) => {

        this.setState({

            userEmail: email,

        });

    };

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

          Welcome to React Native!

        </Text>

          <Text style={{ fontSize: 16, marginBottom: 10 }}>获取验证码</Text>

          <TouchableOpacity

              activeOpacity={1.0}

              onPress={this.model.getCheckCode}

              style={styles.check_image_btn}

          >

              <Image

                  source={{ uri: this.state.imageUrl, cache: 'reload' }}

                  style={{ width: 140, height: 45 }}

                  resizeMode={'contain'}

              />

          </TouchableOpacity>

          <Text style={{ fontSize: 16, marginTop: 10 }}>获取用户信息</Text>

          <TouchableOpacity

              onPress={() => this.model.getUserInfo(tstToken)}

              style={styles.userInfo_btn}

          >

              <Text style={{ textAlign: 'center' }}>{this.state.userEmail}</Text>

          </TouchableOpacity>

      </View>

    );

  }

}

点击按钮后效果：