React Native报错：Nothing was returned from render，文件结构存疑求助

首先帮你理清根目录下文件的作用，消除你的疑惑：

• 根目录/index.js：这是React Native项目的入口文件，AppRegistry的作用就是把你的主组件注册到Native环境中，让App能正常启动，这部分代码完全没问题。
• 根目录/App.js：这是一个简单的中转文件，把/src/index.js导出的组件再导出，相当于一个别名，这部分也不会导致错误。

你的错误根源完全在/src/index.js里——两个组件的箭头函数都没有返回JSX内容，React组件要求函数组件本身必须返回一个JSX元素或者null，否则就会抛出"Nothing was returned from render"错误。

错误的具体位置 #

1. 第一个问题：const App的箭头函数用了大括号{}，但没有写return语句，箭头函数如果用大括号包裹代码块，必须显式return值：

const App = ({ dispatch, nav }) => { <Navigator ... /> };
// 这里没有return，默认返回undefined

2. 第二个问题：最后导出的箭头函数同样用了大括号，没有return Provider组件：

export default () => { <Provider store={store}> <AppWithNavigation /> </Provider> }
// 同样没有return，返回undefined

修改后的完整/src/index.js代码 #

import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider, connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import Navigator from './routes/route';
import store from './store/configureStore';

// 修复方式1：用小括号包裹JSX，箭头函数会自动返回
const App = ({ dispatch, nav }) => (
  <Navigator 
    navigation={addNavigationHelpers({ 
      dispatch, 
      state: nav, 
    })} 
  />
);

const mapStateToProps = state => ({ nav: state.nav, });
const AppWithNavigation = connect(mapStateToProps)(App);

// 修复方式2：显式写return语句
export default () => {
  return (
    <Provider store={store}> 
      <AppWithNavigation /> 
    </Provider>
  )
}

两种修复方式说明 #

• 对于箭头函数，如果直接返回JSX，可以用小括号()包裹JSX，这样不需要写return，箭头函数会自动返回括号内的内容。
• 如果用大括号{}包裹代码块，必须显式添加return语句来返回JSX元素。

修改完成后，你的组件就能正确返回内容，错误也就解决了。

内容的提问来源于stack exchange，提问作者Kay