두 개의 탭이있는 슬라이딩 tabView가 있습니다. 탭 선택 여부에 따라 제목 색상이 변경됩니다. 선택되지 않은 경우 # 9B9B9B '(lightGrey)와 선택한 경우'# 666768 '(darkGrey) 사이에서 깜박입니다.
또한 제목 옆에 아이콘을 렌더링하고 있습니다. 선택한 탭에 따라 아이콘 색상도 변경하고 싶습니다.
어떤 이유로이 문제가 발생하지 않으며 탭 선택 여부에 관계없이 아이콘의 색상이 선택되지 않은 상태로 유지됩니다.
이 문제를 어떻게 해결할 수 있습니까? 내 코드는 다음과 같습니다. 감사합니다.
_renderLabel = (props: any) => ({ route, index }) => {
const inputRange = props.navigationState.routes.map((x, i) => i);
const outputRange = inputRange.map(
inputIndex => inputIndex === index ? '#666768' : '#9B9B9B');
const color = props.position.interpolate({
inputRange,
outputRange,
});
return (
<View style={styles.labelContainer}>
<FontAwesome
name={route.title === 'New' ? 'clock-o' : 'fire'}
size={14}
color={color === '#666768' ? '#666768' : '#9B9B9B'}
/>
<Animated.Text style={[styles.label, { color }]}>
{route.title}
</Animated.Text>
</View>
);
};
나는 이것을 이것을 변경해야했다.
const AnimatedFontAwesome = Animated.createAnimatedComponent(FontAwesome);
...
<AnimatedFontAwesome
name={route.title === 'New' ? 'clock-o' : 'fire'}
size={14}
style={{ color }}
/>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다