réagir native animation navbar ınput texte

Question

Je veux afficher un bouton d'annulation (iptal), sur le focus TextInput animation?

j'ai fait le code suivant, mais il n'a pas fonctionné:

constructor(props) { 
    super(props); 
    this.state = { cancelBtn:this.cancelBtn()}; 
} 

cancelBtn(){ 
    return (<TouchableHighlight style={styles.searchTouch} onPress={this.press()}> 
    <Text style={styles.searchBarText}>İptal</Text> 
    </TouchableHighlight>); 
} 

render(){ 
    <View style={styles.searchBar}> 
     <View style={styles.searchBarBox}> 
      <TextInput 
       ref="searchBarInput" 
       style = {styles.searchBarInput} 
       placeholder = 'Mekan Ara...' 
      /> 
     </View> 
    {this.state.cancelBtn} 
    </View> 
} 

Comment puis-je faire cela d'une manière animée?

img: s.s.1 =>http://i.stack.imgur.com/m7wxm.png

s.s.2 =>http://i.stack.imgur.com/hYa3z.png

Answer 1

Utilisation de la méthode onFocusTextInput pour déclencher une animation. Inversez-le avec onBlur. Ensuite, affichez l'entrée selon que l'entrée est sélectionnée (état).

Cet exemple n'a pas été testé du point de vue du style, mais devrait vous donner une idée. Make sure to read up on the Animation docs aussi.

constructor() { 
    this.state = { 
    inputLength: new Animated.Value(100), // initial value 
    isFocused: false 
    } 
} 

onFocus() { 
    Animated.timing(this.state.inputLenght, { 
    toValue: 90, // or whatever value 
    duration: 1000 
    }).start(() => this.setState({isFocused: true})) 
} 

onBlur() { 
    Animated.timing(this.state.inputLenght, { 
    toValue: 100, // or whatever value 
    duration: 1000 
    }).start(() => this.setState({isFocused: false})) 
} 



<Animated.View style={{width: this.state.inputLength}}> 
    <TextInput 
    ref="input" 
    onFocus={this.onFocus} 
    onBlur={this.onBlur} 
    ... 
    /> 
</Animated.View> 
{this.state.isFocused && (
    <TouchableOpacity onPress={() => this.refs.input.blur()}><Text>Submit</Text></TouchableOpacity> 
)}