反应原生 - 不能返回简单的功能？意外的标记？

Question

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

我正在尝试了解如何返回不同的函数，但这些教程的语法似乎与 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

React 组件应该返回或渲染 React 元素。 在 ReactNative 中有效的 React 元素至少有一个元素 例如<Text> Hello World </Text>

如果您想返回多个元素，则将其包装在View 中。例如：

<View>
  <Text> Hello World1 </Text>
  <Text> Hello World2 </Text>
<View>

所以对于您的代码示例，您可以尝试这样的操作

render() {
  return (
   <View>
     {this.test()}
   </View>
}

test() {
  console.log("Hello World")
}

Answer 2

问题出在你的班级。

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");
  }
}

这不是您在其中定义方法的方式。相反，您应该以这种方式定义 test 方法：

export default class SkysReact extends Component {

  constructor() {
    this.test = this.test.bind(this);
  }

  render() {
    return this.test();
  }

  test() {
    return (
      /* your jsx here */
    );  
  }

}

Answer 3

在 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>
    )
  }
}