react-native-router-flux, Hot-reloading и Key XXX уже определены в React-native

Каждый раз, когда я меняю компонент, я получаю предупреждение «Ключ уже определен!» и горячая перезагрузка перестают работать.

Может ли кто-нибудь указать, что я делаю неправильно? Вот в основном что у меня есть:

Основной index.ios.js с Провайдером.

// index.ios.js
const store = configureStore();

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

// Render to the device
AppRegistry.registerComponent('Mythology', () => Root);

объявление store/redux-logger

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

Вот App.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);

А вот и Scenes.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;

Я пытался использовать componentShouldUptate, но безуспешно.

Если я что-то упустил, полный код находится на github: https://github.com/kamiranoff/mythology


person Kevin Amiranoff    schedule 12.02.2017    source источник


Ответы (1)


У меня была такая же проблема после этого решил мою проблему. Изменить: это было для React Native Router Flux v3. Обновленная ссылка: эта.

person Amirc    schedule 10.03.2017