React Native 中的底部导航

Question

here is image

can we make this kind of bottom navigation in react native specially the shape on navigation? can I make this kind of bottom navigation specially the wave on it

Answer 1

You can make your custom bottom bar

Working example: https://snack.expo.io/@msbot01/happy-waffle

(You can adjust code as per required UI)

Example code

import React, { Component } from 'react';
 import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native';
    import Icon from 'react-native-vector-icons/FontAwesome5';
    import Dashboard from './Dashboard';
    import Gift from './Gift';
    import Like from './Like';
    
    var width = Dimensions.get('window').width 
    
    var tabs = [
        {
          key: 'home',
          icon: 'home',
          label: 'Home',
          barColor: '#388E3C',
          pressColor: 'rgba(255, 255, 255, 0.16)',
          badgeCount: 0
        },
        {
          key: 'heart',
          icon: 'calendar-check',
          label: 'Heart',
          barColor: '#B71C1C',
          pressColor: 'rgba(255, 255, 255, 0.16)',
          badgeCount: 2
        },
        {
          key: 'location',
          icon: 'users',
          label: 'Location',
          barColor: '#E64A19',
          pressColor: 'rgba(255, 255, 255, 0.16)',
          badgeCount: 2
        }
      ]
    
    
    
    export default class SupervisorDashboard extends Component<Props> {
    
     constructor(props) {
        super(props);
        this.state = { 
          userData: global.userData,
          selectedTab: 'home',
         
        }    
      }
    
      componentDidMount(){
        
      }
    
      dateSelected(e){
        this.setState({
          selectedDate: e
        })
      }
    
      homePressed(){
        console.log('Home____')
        this.setState({
          selectedTab: 'home'
        })
      }
    
      heartPressed(){
        console.log('heart____')
        this.setState({
          selectedTab: 'heart'
        })
      }
    
      locationPressed(){
        console.log('Location____')
        this.setState({
          selectedTab: 'location'
        })
      }
    
    
     
    
      renderScene(){
        switch(this.state.selectedTab) {
          case ('home'):{
            return <Dashboard/>
          }
          break;
    
          case ('heart'):{
            return <Like/>
          }
          break;
    
          case ('location'):{
            return <Gift/>
          }
          break;
    
        }
      }
    
      renderMenuIcons(){
        var tempArray = []
        for (var i =0; i < tabs.length; i++) {
          var a = tabs[i].key
          console.log(a)
          var eachElement;
    
          switch(tabs[i].key) {
    
            case ('home'):{
              console.log('I am in home++++++++++')
              eachElement = <TouchableOpacity  key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.homePressed()}}>
                <Icon name = {tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
                
                
              </TouchableOpacity>
            }
            break;
              
            case ('heart'):{
              console.log('I am in approvals+++++++++++')
              eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center', marginBottom:30, backgroundColor:'green', height:50, width:50, borderRadius:30}} onPress={()=>{this.heartPressed()}}>
                <Icon name={tabs[i].icon} size={25} light color={'white'}/>
                
              </TouchableOpacity>
            }
            break;
              
            case ('location'):{
              console.log('I am in location+++++++++++++')
              eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.locationPressed()}}>
                <Icon name={tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
                
              </TouchableOpacity>
            }
            break;
    
            default:{
              console.log('+++++++++++++++++'+tabs[i].key)
            }
    
          }
    
          tempArray.push(eachElement)
        }
        return tempArray;
      }
    
      
      render(){
        return(
          <View style={{flex:1, backgroundColor: global.backGroundColor}}>
                    
            {this.renderScene()}
             
    
    
             <View style={styles.oval}>
             </View> 
             
             <View style={{width:'90%', alignItems:'center', height:70, flexDirection:'row', justifyContent:'space-around', marginLeft:'5%', marginRight:'5%',  position:'absolute', bottom:10, borderRadius:30, borderColor: global.borderColor, backgroundColor:global.backGroundColor}}>
             {this.renderMenuIcons()}
    
              </View>
    
    
          </View>
        );
      }
    
    }
    
    const styles = StyleSheet.create({
      background: {
        backgroundColor: 'red'
      },
      oval: {
            width: (0.78*width),
            height: (0.78*width),
            borderRadius: 150,
            //backgroundColor: 'red',
            borderWidth:1,
            borderColor:'#e4e4e4', 
            transform: [
              {scaleX: 1.5}
            ],
            marginLeft:45,
            marginTop:150,
            position:'absolute',
            bottom:-200
        }
    });