Question

请耐心等待，因为我是这一切的新手，这是我第一个发布的问题！我正在尝试通过注册按钮设置一个简单的“欢迎屏幕”，并且正在学习ios / App开发过程/ react-native和javascript。谁能确切解释为什么第68行出现错误？以前我收到此错误，并认为可能是因为我在类外“调用”了样式，但是我认为这只是一个问题，如果这是一个函数而不是一个类？错误读取：无法加载包（http://localhost:8081/index.bundle？ platform = ios＆dev = true＆minify = false），错误：（语法错误：/Users/name/appname/App.js：意外令牌，预期为“}”（68:13）

type Props = {};

export default class App extends Component<Props> {
  render() {
    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: 10
      },
      button: {
        alignItems: "center",
        backgroundColor: "blue",
        width: 100,
        padding: 10
      },
      countText: {
        padding: 20,
        color: "#FF00FF"
      }
    });
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to P2P Blockchain!</Text>
        <Text style={styles.instructions}>To get started, click below!</Text>
        <View style={styles.container}>
          <TouchableHighlight style={styles.button} onPress={this.onPress}>
            <Text> Sign Up Here! </Text>
          </TouchableHighlight>
          <View style={[styles.countContainer]}>
            <Text style={[styles.countText]}>
              {this.state.count !== 0 ? this.state.count : null}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

Answer 1

import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, Text } from 'react-native';

type Props = {};

class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            count: 10,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to P2P Blockchain!</Text>
                <Text style={styles.instructions}>To get started, click below!</Text>
                <View style={styles.container}>
                    <TouchableHighlight style={styles.button} onPress={this.onPress}>
                        <Text> Sign Up Here! </Text>
                    </TouchableHighlight>
                    <View style={styles.countContainer}>
                        <Text style={styles.countText}>
                            {this.state.count !== 0 ? this.state.count : null}
                        </Text>
                    </View>
                </View>
            </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: 10
    },
    button: {
        alignItems: "center",
        backgroundColor: "blue",
        width: 100,
        padding: 10
    },
    countText: {
        padding: 20,
        color: "#FF00FF"
    }
});

export default App;

意外的令牌，在我的countText情况下应为“}”

1 个答案: