Выполнение вкладок нижнего колонтитула в родном реакторе с использованием родной базы

Question

Я создаю собственное приложение для реагирования, используя собственную базу для пользовательского интерфейса (http://nativebase.io/docs/v2.0.0/components#footerTab). Я использую компонент footerTabs и мой код выглядит следующим образом

render() { 
    return (

<Container> 
    <Header backgroundColor="#ECEFF1"> 
     <Button transparent> 
      <Icon name='ios-menu' style={{color: 'black'}}/> 
     </Button> 
     <Title style={{color:'black'}}>Header</Title> 
    </Header> 

    <Content> 
     <Profile/> 
    </Content> 

    <Footer backgroundColor="#212121"> 
     <FooterTab> 
     <Button backgroundColor="#000" > 
      <Icon name="ios-person" size={30} color="#900"/> 
      <Text>Profile</Text> 
     </Button> 

     <Button> 
       <Icon name="ios-search"/> 
       <Text>Search</Text> 
      </Button> 

     <Button> 
      <Icon name="ios-camera"/> 
      <Text>Camera</Text> 
     </Button> 

     <Button> 
      <Icon name="ios-apps"/> 
      <Text>Apps</Text> 
     </Button> 

     <Button> 
      <Icon active name="ios-navigate"/> 
      <Text>Navigate</Text> 
     </Button> 

    </FooterTab> 
    </Footer> 
    </Container> 
); 
} 

я создал различные JS-файлы для различных функциональных возможностей, таких как профили, поиск, приложение ЭСТА .. и импортировал их следующим образом.

import Profile from './Profile'; 

Как реализовать функциональность onPress на кнопках сноске изменить компонент в теге контента в зависимости от того, что был выбран?

<Content> 
    <Profile/> 
</Content> 

Для, например: Если я нажал кнопку поиска Я хочу, чтобы профиль тег должен быть заменен и точно так же для других кнопок.

Answer 1

Здесь FooterTab от родной базы не сохраняет фактические функции табуляции, такие как UITabBar в iOS, его единственное сохранение для дизайна. Что вам нужно сделать, так и добавьте тег footer во всем своем компоненте со всеми четырьмя кнопками и действуйте соответствующим образом. Для изменения вида, выбрав любую кнопку, которую необходимо заменить текущий вид выбранного одним использования навигатора как:

<Button onPress={()=> { this.props.navigator.replace({id:'component name'}) }}> 

и в компоненте навигатора вы должны определить все необходимые компоненты в методе renderScene на основе значения идентификатора в маршруте полезной нагрузке , Если вы хотите, чтобы фактическая функциональность работала в TabBar, вы можете использовать этот сторонний модуль react-native-tab-navigator. Благодаря!

Answer 2

Вместо того чтобы заменять содержимое, почему у вас нет каждой кнопки, перейдите на новую страницу?

Предположим, вы находитесь на вкладке «Профиль». Вы могли бы сделать что-то вроде этого:

import FooterWrapper from './FooterWrapper' 

<Footer> 
    <FooterWrapper tab='profile' navigator={this.props.navigator} /> 
</Footer> 

И тогда в вашем FooterWrapper (я только обработал случай двух вкладок):

constructor(props) { 
    super(props) 
    this.state = { 
    profileTab: this.props.tab === 'profile', 
    searchTab: this.props.tab === 'search', 
    } 
} 

navToProfilePage() { 
    this.props.navigator.push({ 
    id: 'profile', 
    tab: 'profile', 
    }) 
} 

navToSearchPage() { 
    this.props.navigator.push({ 
    id: 'search', 
    tab: 'search', 
    }) 
} 

render() { 
    return (
    <FooterTab> 
     <Button active={this.state.profileTab} onPress={() => this.navToProfilePage()}> 
      Profile 
      <Icon name='ios-person' size={30} color='#900' /> 
     </Button> 
     <Button active={this.state.searchTab} onPress={() => this.navToSearchPage()}> 
      Search 
      <Icon name='ios-search' /> 
     </Button> 
    </FooterTab> 
) 
} 

Answer 3

Ok так вот я, как получил его, я использовал метод renderContent в тегах содержимого для генерации представлений в зависимости от изменения состояния при нажатии кнопки.

<Content> 
     {this._renderContent(this.state.selectedTab)}   
</Content> 

selectedTab является переменной состояния, состояние которого устанавливается с помощью this.setState в методе onPress. Функция renderContent имеет функцию if, которая проверяет выбранную вкладку и возвращает соответствующее представление. Я также пробовал навигационный подход, но это казалось более чистым.

_renderContent = (Tab: string,) => { 
    if(this.state.selectedTab==="Profile"){ 
    return (
     <Profile/> 
    ); 
    } 
    else if(this.state.selectedTab==="Search"){ 

    } 
}