Question

我正在寻找一个好的样板，偶然发现了这个：

https://github.com/FormidableLabs/formidable-react-native-app-boilerplate

我注意到它已经过时了所以我正在努力修复它并让它更新（如果有一个更好的最新版本也可以回答我的问题）

无论如何，我在标题和控制台中得到错误，它说：

Warning: Failed prop type: Invalid prop `children`type `function` supplied to `Provider`, expected a single ReactElement.
in Provider (created by Root)
in Root
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

这是我的根源：

/* @flow */

import React, {Component} from "react";
import { Provider } from "react-redux";
import configureStore from "../store/configure-store";
import Scene from "../components/scene";

const store = configureStore();

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        {() => <Scene />}
      </Provider>
    );
  }
}

export default Root;

可能是什么问题？我检查了2个元素的TouchableHighlights但在任何地方找不到它。

更新：

场景组件：

/* @flow */
/*eslint-disable prefer-const */

import React from "react";
import App from "../containers/app";
import NavigationBar from "./navigation-bar";

let {
  Navigator,
  View
} = React;

class Scene extends React.Component {
  renderScene(route: Object, navigator: Object) {
    const Component = route.component;
    return (
      <View style={{flex: 1}}>
        <NavigationBar
          backgroundStyle={{backgroundColor: "#eee"}}
          navigator={navigator}
          route={route}
          title={route.title}
          titleColor="#333"
        />
        <Component
          navigator={navigator}
          route={route}
          {...route.passProps}
        />
      </View>
    );
  }
  render() {
    return (
      <Navigator
        style={{flex: 1}}
        renderScene={this.renderScene}
        initialRoute={{
          component: App,
          title: "Starter App"
        }}
      />
    );
  }
}

export default Scene;

Answer 1

为什么要传递函数{() => <Scene />}？你不应该只是通过<Scene />组件吗？

class Root extends Component {
  render() {
    return (
      <Provider store={store}>
         <Scene />
      </Provider>
    );
  }
}

Answer 2

这不是一个直接的解决方案，但我通过使用这个回购来解决它：

https://github.com/alinz/example-react-native-redux

获得React.Children.only期望收到一个React元素子错误

2 个答案: