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,

Answer 2

为了使用标记，您必须在解构分配块中导入它，就像Text和View一样。

React Native：如果放置在<touchablehighlight> </touchablehighlight> </text>内，<text>将不会渲染

2 个答案: