Страница навигации по вкладкам - React Native - PullRequest
Новая
       9

Страница навигации по вкладкам - React Native

0 голосов
/ 03 марта 2020

Я добавил панель вкладок с ScrollableTabView. Я хочу перемещаться по вкладке, которую я добавил. Например, я хочу, чтобы класс 'mainEkran' открывался в 1.tab. 2. Я хочу показать класс уведомлений при нажатии на вкладку. Как я могу перемещаться с помощью Tab? 

import anaEkran from "../screens/anaEkran";
import notification from "../screens/notification";
    export default class HomeScreen extends Component {
  return (
                   <View style={styles.container}>
                         <ScrollableTabView renderTabBar={() => <MaskTabBar someProp={'here'} showMask={true} maskMode='light' />}>

    <anaEkran navigation={this.props.navigation} tabLabel=".."/>
    <notification navigation={this.props.navigation} tabLabel=".."/>

          </ScrollableTabView>

    <View style={{ marginRight: 10 ,marginTop:30}}>
                         <Image source={require('../images/HEADER.png')} style={{ width: screenWidth, height: 80 }}>
                          .... }

1 Ответ

0 голосов
/ 03 марта 2020 
        renderTabView = () => (
        <Tabs
          ref={(tabView) => this.tabView = tabView}
          style={{ backgroundColor: 'transparent' }}
          tabContainerStyle={{ elevation: 0, backgroundColor: 'transparent' }}
          tabStyle={{ backgroundColor: 'transparent' }}
          page={this.props.navigation.getParam('page')}
          onChangeTab={this.onChangeTab.bind(this)}
        >
          <Tab
            heading="Tab 1"
            tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            textStyle={styles.textStyle}
            activeTextStyle={styles.textStyle}
            active={this.props.navigation.state.index === 0}
          >
            <Tab1
              {...this.props}
            />
          </Tab>

          <Tab
            heading="Tab2"
            tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            textStyle={styles.textStyle}
            activeTextStyle={styles.textStyle}
            active={this.props.navigation.state.index === 1}
          >
            <Tab2
              {...this.props}
            />
          </Tab>

          <Tab
            heading="Tab 3"
            tabStyle={{ backgroundColor: 'transparent' }}
            activeTabStyle={{ backgroundColor: 'transparent' }}
            textStyle={styles.textStyle}
            activeTextStyle={styles.textStyle}
            active={this.props.navigation.state.index === 2}
          >
            <Tab3
              {...this.props}
            />
          </Tab>
        </Tabs>
      );

     render() {

    return (
      <Container>
        <Header hasTabs style={styles.header}>
    <Left style={styles.flex1}>
      <TouchableOpacity
        onPress={onLeftPress}
        style={{ marginLeft: 16 }}
      >
       <Text style={styles.notificationTxt}>
                {`Left`}
              </Text>
      </TouchableOpacity>
    </Left>
    <Body style={styles.headerBody}>
      <GNImage
        square
        source={require('../../assets/images/LogoGroup_Header.png')}
        style={styles.logo}
      />
    </Body>
    <Right style={styles.flex1}>
        <TouchableOpacity
          style={[styles.notification, { backgroundColor: '#F2F2F2' }]}
          onPress={onPress}
        >

          <Text style={styles.notificationTxt}>
                {`Done`}
              </Text>
        </TouchableOpacity>
      </View>
    </Right>
  </Header>
        {
          this.renderTabView()
        }
      </Container>
    );
  }

Затем вы можете вызывать вот так, чтобы программно изменить вкладку. 

  openTab = (index) => {
    NavigationService.navigate('Home', {
      page: index
    })
  }

Home - это имя класса, в котором мы определили код TabView, указанный выше.

...