javascript - react native : <Text> won't render if placed inside <TouchableHighlight>

Question

在下面的代码中:

'use strict';

var React = require('react-native'),

{
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component,
  NavigatorIOS
} = React,

styles = StyleSheet.create({
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
})

class Login extends Component {
  render() {
    return (
    /*<TouchableHighlight
      style={styles.button}
      underlayColor='#99d9f4'>*/
      <Text style={styles.text}>Login with Google</Text>
    /*</TouchableHighlight>*/
    )
  }
}

module.exports = Login

<Text>仅当周围的 <TouchableHighlight> 时才会呈现登录名被注释掉了。我做错了什么？

Answer 1

您需要导入“TouchableHighlight”。 将 TouchableHighlight 添加到您的需求列表中。

var React = require('react-native'),

{
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component,
  NavigatorIOS,
  TouchableHighlight
} = React,