react-native-router-flux、Hot-reload 和 Key XXX 已经在 React-nati

Question

每次我更改组件时，我都会收到警告"密钥已定义！"并且热重载停止工作。

谁能指出我做错了什么？这基本上是我所拥有的：

与提供商的主要index.ios.js。

// index.ios.js
const store = configureStore();
const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);
// Render to the device
AppRegistry.registerComponent('Mythology', () => Root);

存储/冗余记录器声明

// configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import reducer from '../reducers';
const configureStore = () => {
  let store;
  if (__DEV__) {
    const logger = createLogger({ collapsed: true });
    store = createStore(
      reducer,
      applyMiddleware(thunk, promise, logger),
    );
  } else {
    store = createStore(
      reducer,
      applyMiddleware(thunk, promise),
    );
  }
  return store;
};
export default configureStore;

这是应用程序.js

// App.js
class App extends Component {
  componentWillMount() {
    this.props.loginWithToken();
    this.props.fetchQuotes('random', true);
    this.props.fetchAllGreeks();
    this.props.fetchBooks();
  }
  render() {
    return (
      <Router
        scenes={Scenes}
      />
    );
  }
}
App.propTypes = {
  loginWithToken: PropTypes.func.isRequired,
  fetchAllGreeks: PropTypes.func.isRequired,
  fetchQuotes: PropTypes.func.isRequired,
  fetchBooks: PropTypes.func.isRequired,
};
export default connect(null,
  {
    loginWithToken,
    fetchAllGreeks,
    fetchBooks,
    fetchQuotes,
  })(App);

这是场景.js

const Scenes = Actions.create(
  <Scene
    key="root"
  >
    <Scene
      key="tabbar"
      tabs
      tabBarStyle={styles.tabBarStyle}
      tabBarIconContainerStyle={{height: null, padding: 10}}
    >
      {/* Homepage */}
      <Scene
        key="home"
        title="Quotes"
        icon={TabIcon}
        navigationBarStyle={styles.navbarStyleWidthShadow}
      >
        <Scene
          key="homepage"
          component={Homepage}
          title="Quotes"
          initial
          renderRightButton={() => <UserIcon />}
        />
      </Scene>
      {/* GreekList page */}
      <Scene
        key="greeks"
        title="Pantheon"
        icon={TabIcon}
      >
        <Scene
          key="greekListPage"
          component={GreekListpage}
          title="Pantheon"
          initial
          renderRightButton={() => <UserIcon />}
          navigationBarStyle={styles.navbarStyle}
        />
        <Scene
          key="singleHeroPage"
          component={SingleHeropage}
          renderRightButton={() => <UserIcon />}
          navigationBarStyle={[styles.navbarStyleWidthShadow, styles.extraShadow]}
        />
      </Scene>
      {/* Books page */}
      <Scene
        key="books"
        title="Books"
        icon={TabIcon}
        navigationBarStyle={styles.navbarStyle}
      >
        <Scene
          key="booksPage"
          component={BookListpage}
          title="Books"
          initial
          renderRightButton={() => <UserIcon />}
        />
        <Scene
          key="singleBookPage"
          component={SingleBookpage}
          renderRightButton={() => <UserIcon />}
        />
      </Scene>
    </Scene>
    <Scene
      key="login"
      title="Login"
      component={Loginpage}
      renderRightButton={() => <UserIcon />}
      navigationBarStyle={styles.navbarStyleWidthShadow}
    />
    <Scene
      key="logout"
      title="Logout"
      component={Logoutpage}
      renderRightButton={() => <UserIcon />}
      navigationBarStyle={styles.navbarStyleWidthShadow}
    />
  </Scene>,
);
export default Scenes;

我尝试使用组件应该Uptate，但没有成功。

如果我缺少某些内容，则完整的代码在github上：https://github.com/kamiranoff/mythology

Answer 1

我遇到了同样的问题，之后解决了我的问题。编辑：这是针对React Native Router Flux v3的。更新后的链接是这样的。