Inst.render is not a function(Re

我是参考React Native中文网上的文档进行学习和理解，如果是新手建议看过这个文档，再往后看，因为文档的内容我不在阐述。

我在读完文档后，自己就去动手开启自己的第一个navigator，但是就是这样一个简简单单的界面，把我折腾的可以说是非常难受，主要是对JS、ES6语法的不熟悉。

我的步骤如下：

1.创建了一个MyReactNativeDelegate.js的入口类(由于受iOS开发，总想着入口需要一个delegate)，在这里面创建navigator，并显示出第一个界面，显示一句话

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

import FirstView from './Day1/FirstView';

export default class navigation extends React.Component {
  render () {
    let pageName = 'FirstView';
    let pageComponent = FirstView;
    return(

      <Navigator
        initialRoute = {{name: pageName, component:pageComponent}}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
        }}
        renderScene = {(route, navigator) => {
          let component = route.component;
          return <Component {...route.params} navigator={navigator} />
        }}
      />
    );
  }
}
AppRegistry.registerComponent('navigation', () => navigation);

2.并且创建一个FirstView.js,用于展示navigator的第一个Component(组件)，里面也就是一句话，来显示是否创建成功。就是显示这样的一句话，也是费尽周折。

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

class FirstView extends React.Component {
  render () {
    return(
      <View>
      <Text style={{fontSize: 100}}> FirstNavigator </Text>
      </View>
    );
  }
}
AppRegistry.registerComponent('FirstView', () => FirstView);
//export default FirstView;

正常情况下，写到了这里我感觉我的小项目应该就OK了啊，立马运行，闹钟开始想象“FirstNavigator”的样子。现实告诉我真的是图样图森破啊，结果如下：

GGB}RJI2B}ASRT31Y_W0M}U.jpg

看到这图之后，我就各种姿势懵逼了，于是开启的google，上面说是语法错误，我看了看我这简单的几行代码，完全不知是哪里出问题，于是我就把MyReactNativeDelegate的render() 代码改成如下：

render() {
     return(
        <View>
         <Text> 'askjdnaskjnd' </Text>
        </View>
     );
   }

结果这行字显示出来了，走到了这里我最起码 清楚一点 ，那就是我的navigator写的有问题，于是我就对着原文档的代码，一行行排查，经过几轮之后，找到区别：
我的：

let component = route.component;

文档中的：

let Component = route.component;

就是这个变量的大小写不对，就导致了render()方法不对，看来还是语法问题。

解决方法

这么写会出现错误的原因，是由于JS在创建一个组件时，首字母必须要大写，当然这段代码也是可以这么写的，这句话的作用：主要是将当前Scene的数据，传递到下一个Scene中去

return <route.component {...route.params} navigator={navigator} />

然后我就修改这个地方，继续运行，啪，又是一片红，这一次出现了另一个错误

%6MKKF2F`@AANOE($I4@BRM.jpg

这一次很明确就是navigator的问题了，但是我反复的检查，都没有发现问题啊，走到这里，已经很考验我的耐心了，然后我就去找人求助，最后锁定了在FirstView中的注册问题

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

由于我在delegate中加过一个类了，导致了这样的问题，

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

后来将FirstView的变成下面的代码，再去运行的时候，发现终于显示出来了。

// AppRegistry.registerComponent('FirstView', () => FirstView);
export default FirstView;

解决方法

鉴于这样直接的语法带来的问题，我就去搜了下AppRegistry.registerComponent的官方文档,给出的解释是：AppRegistry是运行react native App的JS入口，App的根组件应该通过AppRegistry.registerComponent方法去注册，实际上app运行起来是通AppRegistry.runApplication唤醒这个boundle的JS代码。并且当视图销毁时可以通过调用AppRegistry.unmountApplicationComponentAtRootTag方法去退出app。还有很多用法可以参考官方文档，这里就不在赘述（主要是翻译表达不准确）。

最后看看我的运行效果，我的第一个navigator

效果图.gif