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

【问题标题】：React Native - Make the current page active in react native custom bottom navigation barReact Native - 在 React Native 自定义底部导航栏中激活当前页面
【发布时间】：2018-10-03 02:36:40
【问题描述】：

我在 react native 中制作了一个自定义底部导航栏。代码如下。我想浏览导航栏中的页面，当在特定页面上时，导航栏中的图标图像（.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;

【问题讨论】：

标签： css react-native

【解决方案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>

【讨论】：