react-native-material-bottom-navigation-如何更改屏幕之间的导航

Question

我正在使用react-native-material-bottom-navigation模块。如何使用此模块更改屏幕之间的导航。 这是我的代码：

<BottomNavigation
  labelColor="black"
  backgroundColor="white"
  activeLabelColor='white'
  // rippleColor="white"
  shifting={false}
  // overflow =' hidden'
  style={{ elevation: 8, position: 'absolute', height: 56, left: 0, bottom: 0, right: 0 }}
  onTabChange={(newTabIndex) => alert(`New Tab at position ${newTabIndex}`)}
>
  <Tab
    barBackgroundColor="black"
    label="Shop"
    labelColor="white"
    activeLabelColor="white"
    icon={<Image source={require('@images/coffeeCupW.png')} color="white" name="Shop" style={{ width: 20, height: 20 }} />}
  />
  <Tab
    barBackgroundColor="black"
    label="Cart"
    labelColor="white"
    activeLabelColor="white"
    icon={<Image source={require('@images/shopping-cartW.png')} color="white" name="Cart" style={{ width: 20, height: 20 }} />}
  />
  <Tab
    barBackgroundColor="black"
    label="My Orders"
    labelColor="white"
    activeLabelColor="white"
    icon={<Image source={require('@images/ordersW.png')} color="white" name="My Orders" style={{ width: 20, height: 20 }} />}
  />
</BottomNavigation>

这是我的截图：

请给我任何建议

Answer 1

Disclaimer: I'm the author of react-native-material-bottom-navigation.

react-native-material-bottom-navigation is just a Component for the Bottom Navigation. It doesn't include functionality to navigate between screens. To put it simply: It's just a bunch of fancy looking Buttons side by side.

But it tells you which Tab the user pressed, so you can use it together with libraries for navigation, for example:

• react-navigation
• react-native-navigation
• react-router
• NavigatorIOS (if you just want to support iOS)

Answer 2

import Icon from 'react-native-vector-icons/MaterialIcons'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Tab1 from './tab1.js'
import Tab2 from './tab2.js'
import Tab3 from './tab3.js'
import Tab4 from './tab4.js'
import Tab5 from './tab5.js'

export default class GroupScreen extends Component {


 constructor(props) {
    super(props);
    this.state = {
      activeTab: 0,
      selectedTab: 'tab1'
   };
    this.handleTabChange = this.handleTabChange.bind(this);
  }
  componentWillMount() {

  }
  render() {
  const { state, navigate } = this.props.navigation;
    return (
      <View style={styles.container}>

        {this.renderTabs()}
         {this.renderFooterView()}

      </View>
    );
  }

  componentDidMount() {

  }

// Components
renderFooterView() {
    return(

    <BottomNavigation
      activeTab={this.state.activeTab}
      rippleColor="white"
      activeLabelColor="white"
      shifting={false}
      style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
      onTabChange={this.handleTabChange}>
      <Tab
        barBackgroundColor="white"
        icon={<Image source={assets.Setting.home} color="white" name="Home" style={{ width: 20, height: 20 }} />}

      />
      <Tab
        barBackgroundColor="white"
        icon={<Image source={assets.Setting.groupFilled} color="white" 
      name="Group" style={{ width: 20, height: 20 }} />}
      />
      <Tab
        barBackgroundColor="white"
        icon={<Image source={assets.Setting.requestLook} color="white" name="Group" style={{ width: 20, height: 20 }} />}

      />
      <Tab
        barBackgroundColor="white"
        icon={<Image source={assets.Setting.profile} color="white" name="Group" style={{ width: 20, height: 20 }} />}

      />
      <Tab
        barBackgroundColor="white"
        icon={<Image source={assets.Setting.setting} color="white" name="Group" style={{ width: 20, height: 20 }} />}

      />
    </BottomNavigation>
     )
}

renderTabs() {
  switch (this.state.activeTab) {
    case 0:
      return <Tab1 />
      break
    case 1:
      return <Tab2 />
      break
    case 2:
      return <Tab3 />
      break
    case 3:
      return <Tab4 />
      break
    case 4:
      return <Tab5 />
      break

  }
}
  // Handlers
  handleTabChange(newTabIndex, oldTabIndex) {
   this.setState({ activeTab: newTabIndex });
   if (newTabIndex === oldTabIndex) {
     null;
   }
   if (this.state.activeTab === 0) {
     this.setState({selectedTab: 'tab1',});
   } else if (this.state.activeTab === 1) {
     this.setState({selectedTab: 'tab2',});
   } else if (this.state.activeTab === 2) {
     this.setState({selectedTab: 'tab3',});
   }else if(this.state.activeTab==3){
     this.setState({selectedTab: 'tab4',});
   }
   else {
     this.setState({selectedTab: 'tab5',});
   }
 }
}



const styles = StyleSheet.create({
   container: {
      flex: 1
   }
})

Answer 3

如果要根据活动选项卡在屏幕上显示不同的内容，可以使用onTabPress属性并将活动选项卡保存在您的状态。查看“受控组件”一章。

您最有可能希望将其与导航库一起使用，例如反应导航或反应本机导航。