Постоянное состояние крючка в React native - PullRequest
Новая
       42

Постоянное состояние крючка в React native

0 голосов
/ 09 марта 2020

Это мое первое приложение в React Native. У меня мало опыта в React, но я использую Vue. Я также новичок в государственном управлении. Я начал использовать хуки, но онлайн-уроки показывают примеры без хуков.

Мой вопрос: как мне сохранить состояние, которое я установил с помощью хуков? Я хочу сохранить проекты, даже когда открываю приложение без inte rnet. 

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

Я искал в Интернете, но учебники, кажется, сосредоточены только на реакции, а не на реакции нативных. Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 10 марта 2020

Вы можете использовать AsynStorage для персистентности.

Для хуков AsyncStorage + проверьте это response-native-hooks / asyn c -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>
  );
}
...