javascript - 如何在React Native中添加按钮？

我对整个“没有CSS”的东西感到困惑，但是我理解为什么它是有益的。我只想在屏幕中间放置一个按钮，但是我还不了解样式在React中如何工作。这是我的代码:

var tapSpeed = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Tap me as fast as you can!
        </Text>
        <View style={styles.button}>
        !
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFCCCC'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  button: {
    textAlign: 'center',
    color: '#ffffff',
    marginBottom: 7,
    border: 1px solid blue,
    borderRadius: 2px
  }
});

最佳答案

更新:使用内置的Button component。

已弃用:

将您的 View 包装到iOS的TouchableHighlight和Android的TouchableNativeFeedback中。

var {
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback
} = React;

var tapSpeed = React.createClass({
  buttonClicked: function() {
    console.log('button clicked');
  },
  render: function() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }
    return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Tap me as fast as you can!
      </Text>
      <TouchableElement
        style={styles.button}
        onPress={this.buttonClicked.bind(this)}>
        <View>
          <Text style={styles.buttonText}>Button!</Text>
        </View>
      </TouchableElement>
    </View>
    );
  }
});

关于javascript - 如何在React Native中添加按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29872918/