reagieren native navbar animation ınput text

Question

Ich möchte einen Abbrechen (iptal) -Taste, auf den Fokus TextInput Animation zeigen?

Ich habe den folgenden Code, aber es hat nicht funktioniert:

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> 
} 

Wie kann ich tun dies in einer animierten Weise?

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

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

Answer 1

Verwenden der Methode der onFocusTextInput eine Animation auslösen. Kehren Sie es mit onBlur um. Zeigen Sie dann die Eingabe basierend darauf an, ob der Eingang ausgewählt ist (Status).

Dieses Beispiel wurde nicht aus der Perspektive des Designs getestet, sollte Ihnen aber eine Idee geben. Make sure to read up on the Animation docs auch.

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> 
)}