反应原生导航栏动画输入文本

Question

我想在焦点 TextInput 动画上显示一个取消 (iptal) 按钮？

我做了以下代码，但没有成功：

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

我如何以动画方式做到这一点？

图片： s.s.1 => http://i.stack.imgur.com/m7wxm.png

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

Answer 1

使用TextInput 的onFocus 方法触发动画。用onBlur 反转它。然后，根据输入是否被选中（状态）显示输入。

此示例未从样式角度进行测试，但应该可以让您有所了解。 Make sure to read up on the Animation docs 也是。

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