javascript - 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 实现 react 导航。

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