Question

这是我在React Native中的第一个应用程序。我几乎没有React经验，但是我一直在使用Vue。我也是州管理的新手。我已经开始使用钩子，但是在线教程显示了没有钩子的示例。

我的问题是，我如何保持使用挂钩设置的状态？即使在没有互联网的情况下打开应用程序，我也想保存项目。

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import Geolocation from '@react-native-community/geolocation'
import { FlatList, ActivityIndicator, Text, View } from 'react-native'

axios.defaults.baseURL = 'http://www.json.test/api/'

export default () => {
  const [loading, setLoading] = useState(true)
  const [projects, setProjects] = useState([])
  const [position, setPosition] = useState({
    latitude: 0,
    longitude: 0,
  })

  const getProjects = async () => {
    // console.log()
    const projects = await axios(
      `projects/${position.latitude}/${position.longitude}`,
    )
    setProjects(projects.data)
    setLoading(false)
  }

  useEffect(() => {
    if (position.latitude != 0 && position.longitude != 0) {
      getProjects()
    }
  }, [position])

  useEffect(() => {
    Geolocation.getCurrentPosition(
      pos => {
        setPosition({
          latitude: pos.coords.latitude,
          longitude: pos.coords.longitude,
        })
      },
      error => console.log(error.message),
    )
  }, [])

  if (loading) {
    return (
      <View style={{ flex: 1, padding: 20 }}>
        <ActivityIndicator
          style={{
            flex: 1,
            padding: 20,
            alignContent: 'center',
            justifyContent: 'center',
          }}
        />
      </View>
    )
  }

  return (
    <View style={{ flex: 1, paddingTop: 80, paddingLeft: 50 }}>
      <FlatList
        data={projects}
        renderItem={({ item }) => (
          <View style={{ marginBottom: 20 }}>
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {item.project_name}, {item.id}
            </Text>
            <Text>{item.project_description}</Text>
            <Text style={{ fontStyle: 'italic' }}>
              {Number(item.distance.toFixed(2))} Km
            </Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      {/* <Text>{position.latitude}</Text> */}
    </View>
  )
}

我在网上搜索了内容，但这些教程似乎只专注于react而没有关注本机。感谢您的帮助！

Answer 1

您可以使用AsynStorage进行持久化。

对于AsyncStorage +钩子，请检出react-native-hooks/async-storage库。

一个简单的代码示例如下所示：

import useAsyncStorage from '@rnhooks/async-storage';

function App() {
  const [storageItem, updateStorageItem, clearStorageItem] = useAsyncStorage(
    key,
  );

  return (
    <View style={styles.container}>
      <Text style={styles.type}>{`Storage Value: ${storageItem}`}</Text>
      <Button
        title="Update Item"
        onPress={() => updateStorageItem('Test String')}
      />
      <Button title="Clear Item" onPress={() => clearStorageItem()} />
    </View>
  );
}

在React Native中持久化状态钩子

1 个答案: