css - React Native - 在 React Native 自定义底部导航栏中激活当前页面

Question

我在 React Native 中制作了一个自定义底部导航栏。代码如下。我想浏览导航栏中的页面，当在特定页面上时，导航栏中的图标 image(.png) 应该处于事件状态以指示当前页面。帮助我使页面在底部导航栏上可见。

import React from 'react';
    import {
      Dimensions,
      View,
      Image,
      TouchableOpacity,
      Text,
      Platform,
    } from 'react-native';
    const { width, height } = Dimensions.get("window");
    import images from '../../images';
    import NormalizeSize from '../../styles/NormalizeSize'
    import common from '../../css/common'
    import NavigatorService from '../../lib/NavigatorService';
    const {normalize}=NormalizeSize;
    const Bottom=(props)=>{
      const {navigate, state}=props.navigation;

      const {isDrawer,isRightButton,isNotificationButton,title,navigation, isFilterButton, isDummyButton}=props;
      return(
        <View style={{position:'absolute', bottom: 0}}>
          <View>

            <TouchableOpacity
              onPress={() => { NavigatorService.navigate('ExcerciseList') }}
              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} style={common.bottomNavBlock}>
              <Image
                resizeMode='contain'
                style={{ height: 20, width: 20 }}
                source={images.excercise_icon} />

            </TouchableOpacity>
            ...........

          </View>
        </View>
      )
    }

    export default Bottom;

Answer 1

只需像这样更改代码。为此，您需要两个图像:非事件图标和事件图标。

 <TouchableOpacity
          onPress={() => { NavigatorService.navigate('ExcerciseList') }}
          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }} style={common.bottomNavBlock}>
          {state.routeName==='ExcerciseList'?<Image
            resizeMode='contain'
            style={{ height: 20, width: 20 }}
            source={images.excercise_active} />:<Image
            resizeMode='contain'
            style={{ height: 20, width: 20 }}
            source={images.excercise_icon} />}
        </TouchableOpacity>