Messenger Input在react-native中展开动画

时间:2019-02-01 09:48:22

标签: javascript android reactjs react-native animation

嗨,我想像信使一样从左扩展输入,并像信使一样从左隐藏录音和画廊图标

 const SEARCH_FULL_WIDTH = 230 //search_width when unfocused
 const SEARCH_SHRINK_WIDTH = 280  //search_width when focused

   this.progress = new Animated.Value(SEARCH_FULL_WIDTH)
  if(focuseInput){
            this.setState({boolean: false})
            Animated.timing(this.progress, {
                toValue: SEARCH_SHRINK_WIDTH,
                duration: 400,
                useNativeDriver: true
              }).start()
           }
     // unfocuseInput
            else{

            Animated.timing(this.progress, {
                toValue: SEARCH_FULL_WIDTH,
                duration: 400,
                useNativeDriver: true
              }).start(() =>  this.setState({boolean: true}))
           }


          <Animated.View style={{width: this.progress}}>
            <Composer
                {...props}
                onFocus={() => alert("Focus")}
                placeholderTextColor={'#c0c0bf'}
                />

         </Animated.View>

0 个答案:

没有答案