React Native - 渲染没有返回任何内容答案

【问题标题】：React Native - Nothing was returned from renderReact Native - 渲染没有返回任何内容
【发布时间】：2018-07-09 06:26:51
【问题描述】：

我的应用程序存储在 /src/index.js 中，但我也有一个 /App.js 和一个 /index.js。

我不知道这些之间的区别，我认为这就是我收到此错误的原因。

/index.js

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('client', () => App);

/App.js

import App from './src/index';

export default App;

/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';


const App = ({ dispatch, nav }) => {

    <Navigator
        navigation={addNavigationHelpers({
            dispatch,
            state: nav,
        })}
    />
};

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



const AppWithNavigation = connect(mapStateToProps)(App);

export default () => {

    <Provider store={store}>
        <AppWithNavigation />
    </Provider>

}

我使用 create react native 包来构建这个项目，然后尝试按照一些指南使用 redux 实现 react 导航。

【问题讨论】：

您尚未在 index.js 中导出 App，而您将在 App.js 中导入

标签： javascript react-native react-redux react-navigation

【解决方案1】：

您的默认导出不返回任何内容：

export default () => {

    <Provider store={store}>
        <AppWithNavigation />
    </Provider>

}

要返回带有箭头函数的 JSX，您需要使用 () => ( <JSX /> ) 或带有花括号的等效项：() => { return ( <JSX /> ) }：

export default () => (    
    <Provider store={store}>
        <AppWithNavigation />
    </Provider>
)

或：

export default () => {
    return (    
       <Provider store={store}>
           <AppWithNavigation />
       </Provider>
   )
}

【讨论】：

在我获取组件之前没有呈现任何内容，在你更改我获取应用程序之后没有呈现任何内容
哦，您也需要更改您的应用组件，这是同样的错误

【解决方案2】：

你忘了returncomponents

const App = ({ dispatch, nav }) => {
    return(
        <Navigator
            navigation={addNavigationHelpers({
                dispatch,
                state: nav,
            })}
        />
    )
};


export default () => {
    return(
        <Provider store={store}>
            <AppWithNavigation />
        </Provider>
    )
}

【讨论】：

【解决方案3】：

我没有提到这个

import React from 'react';

以及我的其他屏幕文件中的所有其他react-native 组件。

因为我是从另一个文件调用我的屏幕组件，从 App.js 文件，所以我还必须在该文件中导入 react 和 react-native 组件。

【讨论】：