如何在 react-native 中实现动画搜索栏

Question

我想在我的 reactnative 应用程序中添加一个动画搜索栏，例如 google 应用程序（Gmail、地图等）。 我没有找到任何可以执行此操作的软件包。 我发现了很多包

How to build Gmail like search box in the action bar?

Creating a SearchView that looks like the material design guidelines

How to implement Search Bar like gmail app in android?

所以请帮我做这件事..

这是我想要的一个例子（我不知道如何使用动画）

Answer 1

你可以使用react-native-animated-searchbox

用法（来自文档）：

//Call for the open  
openSearchBox = () => this.refSearchBox.open();  
  
//Call for the close  
closeSearchBox = () => this.refSearchBox.close();  
  
render() {  
 return ( 
    <View>
  
        <ReactNativeAnimatedSearchbox 
            ref={(ref) => this.refSearchBox = ref} 
            placeholder={"Search..."} 
        />
         
    </View>  
 )}  
  

Answer 2

听到就是一个例子

import React, { useEffect, useState, useRef } from "react";
import {
  Text,
  View,
  StyleSheet,
  ImageBackground,
  TouchableOpacity,
} from "react-native";

import ReactNativeAnimatedSearchbox from "react-native-animated-searchbox";

function App() {
  const refSearchBox = useRef();
  const [searchIconColor, setSearchIconColor] = useState("#555");

  useEffect(() => {
    openSearchBox();
  }, []);

  const openSearchBox = () => refSearchBox.current.open();
  const closeSearchBox = () => refSearchBox.current.close();

  return (
    <View style={styles.container}>
      <ImageBackground
        style={styles.bgImage}
        source={require("./../../../assets/img/bg.png")}
      >
        <ReactNativeAnimatedSearchbox
          ref={refSearchBox}
          placeholder={"Search..."}
          searchIconColor={searchIconColor}
          onClosed={() => {
            setSearchIconColor("#fff");
          }}
          onOpening={() => {
            setSearchIconColor("#555");
          }}
        />

        <View style={styles.buttonsArea}>
          <View style={styles.row}>
            <TouchableOpacity
              style={styles.buttonContainer}
              onPress={openSearchBox}
            >
              <Text style={styles.buttonText}>OPEN</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.buttonContainer}
              onPress={closeSearchBox}
            >
              <Text style={styles.buttonText}>CLOSE</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ImageBackground>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bgImage: {
    flex: 1,
    resizeMode: "cover",
    paddingTop: 50,
    paddingLeft: 15,
    paddingRight: 15,
  },
  buttonsArea: {
    flex: 1,
    marginBottom: 15,
    justifyContent: "flex-end",
  },
  row: {
    flex: 1,
    justifyContent: "center",
    flexDirection: "row",
    marginLeft: -10,
    marginRight: -10,
    maxHeight: 50,
    marginTop: 5,
  },
  buttonContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(255,255,255,0.80)",
    margin: 10,
    height: 40,
    borderRadius: 40,
  },
  buttonText: {
    fontWeight: "bold",
    color: "#555",
  },
});