javascript-带有状态的React-Native更改源

2019-11-11 21:34:24 阅读：216 来源： 互联网

我正在尝试创建一个React组件,该组件在按下时会在黑色和白色之间切换徽标.我想在组件中加入更多功能,但是changeLogo()console.log甚至不会显示在调试器中.

任何帮助/提示表示赞赏！

反应本机：0.39.2
反应：^ 15.4.2

import React, { Component } from 'react';
import { View, Image } from 'react-native';

export default class TestButton extends Component {
  constructor(props) {
    super(props);
    this.state = { uri: require('./icons/logo_white.png') }
  }

  changeLogo() {
    console.log('state changed!');
    this.setState({
      uri: require('./icons/logo_black.png')
    });
  }

  render() {
    return (
      <View
        style={styles.container}
      >
        <Image
          source={this.state.uri}
          style={styles.logoStyle}
          onPress={this.changeLogo}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  logoStyle: {
    width: 200,
    height: 200,
    marginLeft: 10,
    marginRight: 5,
    alignSelf: 'center',
  },
};

解决方法:

onPress道具不适用于Image组件.您需要使用TouchableHighlight组件将其包装起来,如下所示：

import { View, Image, TouchableHighlight } from 'react-native';

...

<TouchableHighlight onPress={() => this.changeLogo()}>
  <Image
    source={this.state.uri}
    style={styles.logoStyle}
  />
</TouchableHighlight>

标签：reactjs,react-native,javascript
来源： https://codeday.me/bug/20191111/2022675.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-带有状态的React-Native更改源