Блог

При запуске приложения отображается нижняя вкладка «Вход». Чего я пытаюсь добиться, так это изменить отображаемую вкладку «Вход» на вкладку «Мой профиль» после того, как пользователь вошел в приложение.

Я использовал Redux для сохранения статуса входа в приложение, и мне удалось получить статус, но я понятия не имею, как использовать его для динамического изменения вкладок.

Вот две объявленные вкладки:

 // MainTabNavigator.js

const LoginStack = createSwitchNavigator({
  Login: LoginScreen,
});

LoginStack.navigationOptions = {
  tabBarVisible: true,
  tabBarLabel: 'Login',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />
  ),
}

const MyProfileStack = createSwitchNavigator({
  MyProfile: HomeScreen,
});

MyProfileStack.navigationOptions = ({navigation}) => ({
  tabBarVisible: true,
  tabBarLabel: 'My Profile',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'}
    />
  ),
})

export default createBottomTabNavigator({ LoginStack })
  

Я попытался создать другой компонент и подключить его, а затем импортировать его в файл страницы tabs, но я не могу использовать возвращаемое значение isLoggedIn().

 // IfLoggedIn.js

function IsLoggedIn(props) {
  return props.loginState.isLoggedIn ? true : false
}

const mapStateToProps = ({ loginState }) => ({
  loginState
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  setLoginState
}, dispatch);

export default connect(mapStateToProps,mapDispatchToProps)(IsLoggedIn)
  

Я думал, что могу использовать это в файле страницы tabs следующим образом:

 // MainTabNavigator.js

const InterChangeTab = IsLoggedIn ? MyProfileStack : LoginStack
export default createBottomTabNavigator({ InterChangeTab })
  

Но это не сработало, потому что isLoggedIn является компонентом, а не обычной функцией.

Почему бы не вернуть свой LoginStack или MyProfileStack прямо на свой IfLoggedIn ?

 function IsLoggedIn(props) {
  return ({props.loginState.isLoggedIn ? <MyProfileStack /> : <LoginStack />})
}
  

На самом деле, IMO, я предпочитаю использовать другой SwitchNavigator для переключения между экраном входа в систему и экранами моего содержимого, проверьте этот react navigation docs в потоке аутентификации