В приложении React-Native, как использовать SwitchNavigator (реагировать-навигатор) и реагировать-избыточно? - PullRequest
Новая
       14

В приложении React-Native, как использовать SwitchNavigator (реагировать-навигатор) и реагировать-избыточно?

0 голосов
/ 28 августа 2018

Я использую SwitchNavigator реагирующей навигации, чтобы управлять моей навигацией на основе состояния аутентификации. После аутентификации я хочу использовать Redux для хранения данных, которые я получаю.

Мой SwitchNavigator выглядит так 

SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Authenticated: AppStackNavigator,
  NotAuthenticated: AuthStackNavigator,
}

SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

export default createSwitchNavigator(SwitchRouteConfig, SwitchConfig);

Моя аутентифицированная навигация выглядит следующим образом: 

// App Bottom Tab Navigator
const AppTabRouteConfig = {
  AddItem: { screen: AddItem },
  Items: { screen: Items },
  Map: { screen: Map },
  Help: { screen: Help },
}
const AppTabConfig = { initialRouteName: 'Items',}
const AppTabNavigator = new createBottomTabNavigator(
                     AppTabRouteConfig, 
                     AppTabConfig)

И на моем экране у нас есть: 

class Items extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount(){
    this.props.getData(); //call our redux action
  }

  render() {
  if(this.props.isLoading){
    return(
      <View>
        <ActivityIndicator />
      </View>
    )
    } else {
      return (
        <Provider store={store}>
          <SafeAreaView>
            <FlatList
              data={this.props.dataSource.features}
              renderItem={({ item }) =>
                <TouchableWithoutFeedback>
                  <View style={styles.listContainer}>
                    <Text>{item.prop1}</Text>
                    <Text>{item.prop2}</Text>
                  </View>
                </TouchableWithoutFeedback>
              }
            />
          </SafeAreaView>
        </Provider>
      )
  }
  }
}

function mapStateToProps(state, props) {
  return {
    isLoading: state.dataReducer.isLoading,
    dataSource: state.dataReducer.dataSource
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Actions, dispatch);
}

export default connect(mapStateToProps,
                       mapDispatchToProps)(Items)

Когда я не аутентифицирован, это прекрасно работает. Я могу войти. Когда я аутентифицируюсь, я получаю следующую ошибку: 

Invariant Violation: Could not find "store" 
in either the context or props of 
Connect(Items)". Either wrap the root 
component in a <Provider>, or explicitly pass 
"store" as a prop to "Connect(Items)".

В чтении, которое я прочитал сегодня, все образцы имеют один компонент верхнего уровня, который они обертывают. Поэтому я не понимаю, как создать экземпляр магазина и управлять Redux без этой модели.

Я должен упомянуть две дополнительные вещи:

  1. Первоначальный экран приложения с проверкой подлинности работал нормально, прежде чем я начал реализовывать Redux.
  2. Я не пытаюсь управлять состоянием с помощью Redux, просто данные приложения.
  3. Проект начался с Create-React-Native-App.

Спасибо!

1 Ответ

0 голосов
/ 28 августа 2018

Вы должны обернуть корневой компонент (навигатор коммутатора) внутри Provider, чтобы сделать хранилище доступным для всех компонентов контейнера. 

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Authenticated: AppStackNavigator,
  NotAuthenticated: AuthStackNavigator,
}

const SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

const Navigator = createSwitchNavigator(SwitchRouteConfig, SwitchConfig);


// You can use a stateless component here if you want
export default class Root extends React.PureComponent {
   render() {
     return (
        <Provider store={store}> 
           <Navigator />
        </Provider >
     );
   }

}
...