React Native - 缩小宽度动画

Question

React Native - 缩小宽度动画

javascriptreact-nativeanimationtransition

13

在我的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为真，则会在搜索栏前出现一个图标，并且搜索栏的宽度将缩小到足以使图标可见。

然而，在此过程中没有转换或动画效果，感觉和外观都不好。我想给搜索栏添加动画，使其在条件被触发并出现图标时逐渐平滑地缩小宽度。

是否有可能实现这一点，如何实现？

- EDJ

你是否使用任何样式库，例如 styled-components？ - Sergio Escudero

@SergioEscudero 我不使用任何样式库。 - EDJ

3个回答

1

你可以使用 React Native 的 Animated API 来实现这一点。

你可以查看这个教程，了解如何使用动画来改变元素的大小。

- Muhammad Shoaib Riaz

-1

React-Native-Animatable非常酷！试试这个:

创建自定义动画对象

import * as Animatable from 'react-native-animatable';

Animatable.initializeRegistryWithDefinitions({
   const myAnimation = {
      from: {
          width: 200 
      },
      to: {
          width: 100
      }
   }
})

将其用作视图中的动画值或函数调用中的引用。

在视图内部：

   <Animatable.View useNativeDriver animation={myAnimation}/>

作为引用变量：

   <Animatable.View useNativeDriver ref={ref=>(this.testAnimation = ref)}/>

方法：

   testMethod = () => {
       this.testAnimation.myAnimation();
   }

- Erick Kondela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mervzs · Accepted Answer

尝试学习React Native的Animated API。

以下是我使用按钮触发完成的方法。

import React, {Component} from 'react';
import {StyleSheet, View, TextInput , Button, SafeAreaView, Animated} from 'react-native';
import FA from 'react-native-vector-icons/FontAwesome5'

const AnimatedIcon = Animated.createAnimatedComponent(FA)
// make your icon animatable using createAnimatedComponent method

export default class Application extends Component {

  animVal = new Animated.Value(0);
   // initialize animated value to use for animation, whereas initial value is zero

  interpolateIcon = this.animVal.interpolate({inputRange:[0,1], outputRange:[0,1]})
  interpolateBar = this.animVal.interpolate({inputRange:[0,1],outputRange:['100%','90%']})
  // initialize interpolation to control the output value that will be passed on styles
  // since we will animate both search bar and icon. we need to initialize both 
  // on icon we will animate the scale whereas outputRange starts at 0 end in 1
  // on search bar we will animate width. whereas outputRange starts at 100% end in 90%

  animatedTransition = Animated.spring(this.animVal,{toValue:1})
  // we use spring to make the animation bouncy . and it will animate to Value 1

  clickAnimate = () => {
    this.animatedTransition.start()
  }
  // button trigger for animation

  //Components that will use on Animation must be Animated eg. Animted.View
  render() {
    return (
      <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.search}>
        {/* our icon */}

        <Animated.View style={{width: this.interpolateBar}}>
        <TextInput placeholder='search here' style={styles.input}/>
        </Animated.View>

        <AnimatedIcon name='search' size={28} style={{paddingLeft: 10,paddingRight:10, transform:[{scale: this.interpolateIcon}]}}/>
        </View>

          <Button title='animate icon' onPress={this.clickAnimate}/>
      </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#F79D42',
    // flex: 1,
    height:'100%',
    paddingTop:20,
    flexDirection: 'column',
    // justifyContent: 'center',
    alignItems:'center'
  },
  input:{
    width: '100%',
    height:40,
    backgroundColor:'gray',
    textAlign:'center'
  },
  search:{
    flexDirection:'row-reverse',
    width:'90%',
    height:40,
    alignItems:'center'
  }
});

使用 react-native-elements 的 SearchBar 组件解决方案。将 SearchBar 组件包装在 Animated.View 中，以明确地对搜索栏进行动画处理。

像这样：

 <Animated.View style={{width: this.interpolateBar}}>
    <SearchBar
    placeholder="Type Here..."
    containerStyle={{width: '100%'}}
  />
    </Animated.View>