React Native - 渲染沒有返回任何內容

Question

我的應用程序存儲在 /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 package 來構建這個項目，然后嘗試按照一些指南使用 redux 實現反應導航。

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

Answer 2

你忘了return components

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


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

Answer 3

我沒有提到這個

import React from 'react';

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

因為我是從 App.js 文件中的另一個文件調用我的屏幕組件，所以我也必須在該文件中導入 react 和 react-native 組件。

Answer 4

有很多原因，例如，如果您使用 function 組件或 class 組件。 如果它顯示這種錯誤 Solve - Nothing was returned from render 反應中的錯誤，這意味着您忘記在 function 組件或 class 組件中添加返回