React Native JS:预期一个组件类，获得[对象对象]

Question

我有一个错误，真的不知道为什么。这是一个用于测试反应本机的简单代码简单代码，想创建一个与其他类的类，并用一个按钮来增加数量：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableHighlight,
  Text,
  View
} from 'react-native';
export default class Apprentissage1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcolm bitch
        </Text>
        <Product name="Product 1"/>
        <Product name="Product 2"/>
      </View>
    );
  }
}
class Product extends Component {
    constructor(props) {                                //Constructeur
        super(props);
        this.state = {
            quantity: 0
        };
    }

  addToCart(){
    this.setState({
      quantity: this.state.quantity + 1
    })
  }
  render(){
    return(
        <View style={styles.container}>
          <h2>{this.props.name}</h2>
          <p>Quantity: {this.state.quantity}</p>
            <TouchableHighlight onPress={this.addToCart.bind(this)}>
          Add To cart
          </TouchableHighlight>
        </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('Apprentissage1', () => Apprentissage1);

谢谢您的帮助:)

Answer 1

用反应本机<View>组件替换<h2>和<p>标签。

您不能在本机应用程序中使用DOM元素。

Answer 2

这是因为您使用的是非组件元素，例如H2，P是HTML元素，而不是反应本性组件。正确使用的组件是Text然后使用H2和p的文本。只需操纵其字体以适应您的需求即可。

<Text style={{ fontSize: 18 }}>{this.props.name}</Text>
<Text style={{ fontSize: 12}}>Quantity: {this.state.quantity}</Text>

ToucheableHighlight也应包含一个单个元素。

  <ToucheableHighlight
    onPress={this.addToCart.bind(this)}
  >
    <Text>
        Add to Cart
     </Text>
   </ToucheableHighlight>

Answer 3

我不确定错误在哪里触发，但是TouchableHighlight的onPress可以是() => { this.setState({quantity: this.state.quantity + 1}) }而不是this.bind.addToCart(this)。

Answer 4

将产品类别分离到新文件，然后将其导入。React Native不太喜欢在同一文件中拥有多个组件。

您还如何初始化项目？什么是错误消息？