Как проверить наличие текущей активной страницы в компоненте?

#react-native #react-native-android #react-native-ios

#react-native #react-native-ios

Вопрос:

Я хотел бы применить другой стиль к компоненту, например, у меня здесь есть значок «Назад»

 import React from 'react';
import { StyleSheet } from 'react-native';
import { Icon } from '@ui-kitten/components';

export const BackIcon = () => (
    <Icon
    style={styles.icon}
    fill='#FFFFFF'
    name='arrow-back-outline'
    />
);

const styles = StyleSheet.create({
  icon: {
    width: 35,
    height: 35,
    bottom: 115,
    right: 145
  },
});
  

В настоящее время у меня к нему применен только 1 стиль, но я хотел бы знать, что вы можете определить текущую активную страницу, чтобы, когда пользователь находится на странице A, значок был оформлен иначе, чем при вызове компонента, например, на странице B.

Ответ №1:

Вы можете передать его как prop из родительского компонента

     <Parent>
    
      <BackIcon current/>
      <BackIcon />
      <BackIcon />
    
    </Parent>
    
    import React from 'react';
    import { StyleSheet } from 'react-native';
    import { Icon } from '@ui-kitten/components';
    
    export const BackIcon = (props) => (
        <Icon
        style={props.current ? styles.activeIcon : styles.icon}
        fill='#FFFFFF'
        name='arrow-back-outline'
        />
    );
    
    const styles = StyleSheet.create({
      icon: {
        width: 35,
        height: 35,
        bottom: 115,
        right: 145
      },
    activeIcon:
    {
     color:'orange',
     width: 35,
     height: 35,
     bottom: 115,
     right: 145
    }
});
  

Комментарии:

1. Привет, спасибо за это, быстрый вопрос, есть ли способ передать переменную для вызова стиля? например, я установил новую переменную page, можно ли будет использовать эту переменную в соответствии со стилем? так что, как styles.page

2. @rwd, не могли бы вы более четко объяснить свой вопрос, я могу помочь, если я понимаю