Динамически изменить вкладку «Вход» с вкладкой «Мой профиль» после того, как пользователь вошел в систему - PullRequest
Новая
       15

Динамически изменить вкладку «Вход» с вкладкой «Мой профиль» после того, как пользователь вошел в систему

2 голосов
/ 14 марта 2019

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

Я использовал 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 })

Я попытался создать другой компонент иподключите его, затем импортируйте в файл вкладок, но я не могу использовать возвращаемое значение 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)

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

// MainTabNavigator.js

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

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

1 Ответ

1 голос
/ 14 марта 2019

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

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

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

...