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 =＆gt; http://i.stack.imgur.com/m7wxm.png

s.s.2 =＆gt; http://i.stack.imgur.com/hYa3z.png

Answer 1

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

此示例未从样式角度进行测试，但应该给您一个想法。 Make sure to read up on the Animation docs也是。

onBlur

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

1 个答案: