React Native：<Text> 如果放在 <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

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

Answer 1

为了使用标签，你必须像Text和View一样在解构赋值块中导入它。

Answer 2

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

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

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

React Native：<Text> 如果放在 <TouchableHighlight> 内将不会呈现

React Native: <Text> won't render if placed inside <TouchableHighlight>

javascript

react-native