Question

我尝试过反应原生的按钮＆＃39; O＆＃RE; REILLY的React Native示例。但它没有正常工作。点击按钮后，它不会改为＆＃39; EEK！＆＃39; 它仍然是“推我”＃。有什么不对吗？我添加了我的代码......

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  TouchableHighlight
} from 'react-native';

class test extends Component {
  // this is constructor
  constructor(props) {
    super(props);
    this.state = { pressing: false };
  }

  _onPressIn = () => {
    this.setState({pressing: true});
  }

  _onPressOut = () => {
    this.setState({pressing: false});
  }

  //  {this.state.pressing ? 'EEK!' : 'PUSH ME'} not working
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          onPressIn={this._onPressIn}
          onPressOut={this._onPressOut}
          style={styles.touchable}>

          <View style={styles.button}>
            <Text style={styles.welcome}>
              {this.state.pressing ? 'EEK!' : 'PUSH ME'}
            </Text>
          </View>

        </TouchableHighlight>

        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
                style={{width: 400, height: 400, resizeMode: 'contain'}} />
      </View>
    );
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome : {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#FFFFFF'
  },
  touchable: {
    borderRadius: 100
  },
  button: {
    backgroundColor: '#FF0000',
    borderRadius: 100,
    height: 200,
    width: 200,
    justifyContent: 'center'
  },
  bold: {
    fontWeight: "bold"
  },
  italic: {
    fontStyle: "italic"
  }
});

class Strong extends Component {
  render() {
    return (
      <Text style={styles.bold}>
        {this.props.children}
      </Text>
    );
  }
}

class Em extends Component {
  render() {
    return (
      <Text style={styles.italic}>
        {this.props.children}
      </Text>
    );
  }
}

export default test;

Answer 1

要实现您的目标，您必须使用TouchableWithoutFeedback代替TouchableHighlight。在onPressIn上没有onPressOut和TouchableHighlight这样的道具，它在TouchableWithoutFeedback上确实存在。以下是解释它的docs

Answer 2

而不是

{this.state.pressing ? 'EEK!' : 'PUSH ME'}

尝试写

{this.state.text}

并将文本置于状态（不要忘记按下和文本之间）：

text:'EEK!'

在按下和按下时，更新文本就像你完成按下一样！

它应该工作=）

react-native eaxmple不起作用

2 个答案: