Question

我有一个错误，真的不知道为什么。这是一个简单的代码juste for test react native，想创建一个用另外一个类来调用的类，而不是按钮来增加数量：

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

将您的<h2>和<p>标记替换为React Native <View>组件。

您不能在React Native应用程序中使用DOM元素。

Answer 2

那是因为您使用的是非组件元素，如h2，p，它们是html元素而不是react-native组件。正确使用的组件是Text 然后对h2和p使用Text。只需操纵其fontSize以满足您的需求。

<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

我不确定错误的触发位置，但onPress的{{1}}可能只是TouchableHighlight而不是() => { this.setState({quantity: this.state.quantity + 1}) }。

Answer 4

将Product类分隔为新文件，然后导入它。 React Native并不喜欢在同一个文件中包含多个组件。

你是如何初始化项目的？什么是错误消息？

React Native JS：期望一个组件类，得到[object Object]

4 个答案: