javascript - React native - 不能返回简单的函数？意外的标记？

Question

我正在尝试学习 React native，但我什至无法返回一个简单的函数。部署时，我的 IOS sim 中出现意外 token 错误或“未返回有效的 react 元素”错误。

我试图了解不同函数的返回方式，但教程的语法似乎与 Facebook 教程中的原始入门页面不同:

http://facebook.github.io/react-native/releases/0.20/

这是我的:

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

//import AwesomeComponent from "./awesome.js";

export default class SkysReact extends Component {
  render() {
    return this.test();
      // return (<View style={styles.container}>
      //   <Text style={styles.welcome}>
      //     Welcome to Skylars React Native!
      //   </Text>
      //   <Text style={styles.instructions}>
      //     This is a sandbox.
      //   </Text>
      // </View>);
  }
  var test = function() {
    console.log("hello world");
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SkysReact', () => SkysReact);

如何在我的文件中定义不同的函数来操作？

Answer 1

在 ES6 函数中定义方法的另一种可能方式:

export default class SkysReact extends Component {
  render () {
    var test = () => {
      console.log("Hello World")
    }

    const test2 = () => {
      return <h1>Hello from the other side</h1>
    }

    return(
      <div>
        {/*// execute test()*/}
        {test()}

        {/*// execute test2()*/}
        {test2()}
        <h1>Hello World</h1>
      </div>
    )
  }
}