React Native Navbar动画输入文本

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

我该如何以动画方式进行操作？

img：S.S.1 => https://i.stack.imgur.com/m7wxm.png

s.s.s.2 => https://i.stack.imgur.com/hya3z.png

Answer 1

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

此示例不是从样式的角度测试的，但应该给您一个想法。确保也可以在动画文档上阅读。

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