在我的React Native应用程序的标题中,我有一个有条件的图标和一个搜索栏(Searchbar)。
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
headerTitle: (
<View
style={{
flex: 1,
backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
height: StatusBar.currentHeight,
}}>
{params.isIconTriggered && <Icon name="chevron-left" size={28} />}
<SearchBar
round
platform={'default'}
placeholder="Search"
containerStyle={{
flex: 1,
backgroundColor: 'transparent',
}}
/>
</View>
),
headerStyle: {
backgroundColor: '#e54b4d',
},
};
};
通常情况下,搜索栏将占用标题的整个宽度,这正是我想要的。如果条件isIconTriggered
为真,则会在搜索栏前出现一个图标,并且搜索栏的宽度将缩小到足以使图标可见。
然而,在此过程中没有转换或动画效果,感觉和外观都不好。我想给搜索栏添加动画,使其在条件被触发并出现图标时逐渐平滑地缩小宽度。
是否有可能实现这一点,如何实现?
styled-components
? - Sergio Escudero