#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, не могли бы вы более четко объяснить свой вопрос, я могу помочь, если я понимаю