javascript - 如何使用钩子(Hook)将值发送到 React Native 中的另一个屏幕？

Question

我正在构建一个天气应用程序。应用程序的主屏幕我每 5 秒从 IP/读取 API 获取数据，并且工作正常。我现在要做的是在我按下链接屏幕中的按钮时从 IP/插入获取数据，然后将该值发送到 HomeScreen。我为此找到了很多教程，但没有找到任何带有反应钩子(Hook)的教程。

这是我的HomeScreen.js文件:

import React, {useState, useEffect} from 'react';
import {Image, Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View, StatusBar, ActivityIndicator} from 'react-native';
import { Icon } from 'react-native-elements';
import * as Font from 'expo-font'

HomeScreen.navigationOptions = {
  header: null,
};

export default function HomeScreen() {
  const [city, setCity] = useState('--');
  const [countrycode, setCountryCode] = useState('0');
  const [icon, setIcon] = useState('ios-sunny');
  const [date, setDate] = useState('00.00');
  const [temperature, setTemperature] = useState('0');
  const [wind, setWind] = useState('0');
  const [humidity, setHumidity] = useState('0');
  const [temperatureInside, setTemperatureInside] = useState('0');
  const [humidityInside, setHumidityInside] = useState('0');
  const [pressure, setPressure] = useState('0');
  const [spinner, setSpinner] = useState(false);
  const [fontLoaded, setFontLoaded] = useState(false); 
  useEffect(() => {
    Font.loadAsync({
      'raleway-regular': require('../assets/fonts/Raleway-Regular.ttf'),
      'raleway-light': require('../assets/fonts/Raleway-Light.ttf'),
    });
    setFontLoaded(true);
    const interval = setInterval(() => {
      fetch('http://192.168.88.253:5000/read')
    .then((response) => response.json())
    .then((responseJson) => {
      setCity(responseJson.city);
      setCountryCode(responseJson.countrycode);
      //setIcon
      if(responseJson.description === 'clear sky'){
        setIcon('ios-sunny');
      }if(responseJson.description === 'few clouds' || responseJson.description === 'scattered clouds',responseJson.description === 'broken clouds'){
        setIcon('ios-partly-sunny');
      }if(responseJson.description === 'light rain' || responseJson.description === 'shgower rain' || responseJson.description === 'shower rain'){
        setIcon('md-rainy');
      }if(responseJson.description === 'thunderstorm'){
        setIcon('md-thunderstorm');
      }if(responseJson.description === 'snow'){
        setIcon('md-snow');
      }if(responseJson.description === 'mist'){
        setIcon('md-partly-sunny');
      }
      setTemperature(responseJson.temperature);
      setWind(responseJson.wind_speed);
      setHumidity(responseJson.humidity);
      setTemperatureInside(responseJson.temperatureInside);
      setHumidityInside(responseJson.humidityInside);
      setDate(responseJson.time);
      setTemperatureInside(responseJson.temperatureInside);
      setHumidityInside(responseJson.humidityInside);
      setPressure(responseJson.pressure);
    })
    .catch((error) => {
      console.warn(error);
    }); 
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.upperContainer}>
        <View style={styles.oneVertical}>
          <Text style={styles.city}>{city.toUpperCase()}, </Text>
          <Text style={styles.countrycode}>{countrycode}</Text> 
        </View>
        <View style={styles.twoVertical}>
          <Icon name={icon} type='ionicon' iconStyle={styles.icon}></Icon>
          <Text style={styles.date}>{date}</Text>  
        </View>
        <View style={styles.threeVertical}>
          <View style={styles.tempView}>
            <Text style={styles.temperature}>{Math.round(temperature)}°</Text>
          </View>
          <View style={styles.otherView}>
            <View style={styles.humidityTemp}>
              <Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-jet'></Icon>
              <Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}> {Math.round(wind)} km/h</Text>
            </View>
            <View style={styles.humidityTemp}>
              <Icon iconStyle={styles.otherViewIcon} type='ionicon' name='ios-water'></Icon>
              <Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>  {humidity} %</Text>
            </View>
          </View>
        </View>
      </View>
      <View style={styles.lowerContainer}>
        <View style={styles.ChamberView}>
          <Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>TEMP.</Text>
          <Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='md-thermometer'></Icon>
          <Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{temperatureInside}°</Text>
        </View>
        <View style={styles.ChamberView}>
          <Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>VLAGA</Text>
          <Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-water'></Icon>
          <Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{humidityInside} %</Text>
        </View>
        <View style={styles.ChamberView}>
          <Text style={{color:'#fff', fontFamily: 'raleway-regular',}}>TLAK</Text>
          <Icon iconStyle={{color:'#fff', fontSize:30, marginVertical:10, }} type='ionicon' name='ios-hand'></Icon>
          <Text style={{color:'#fff', fontSize:20, fontFamily: 'raleway-regular',}}>{pressure} bar</Text>
        </View>
      </View>
    </View>
  );
}

还有 LinksScreen.js文件:

import React, {useState} from 'react';
import { View, StyleSheet, Alert, ActivityIndicator } from 'react-native';
import {SearchBar, Button} from 'react-native-elements';
import MapView from 'react-native-maps';
import Spinner from 'react-native-loading-spinner-overlay';
import { NavigationEvents } from 'react-navigation';

export default function LinksScreen() {
  const [spinner, setSpinner] = useState(false);
  const [search, setSearch] = useState('');
  const handleChange = event => {
    setSearch(event);
  }
  const [latitudePress, setLatitude] = useState('46.54306');
  const [longitudePress,setLongitude] = useState('14.96917');
  function addMarkerAndRequest(e){
    setLatitude(e.nativeEvent.coordinate.latitude); 
    setLongitude(e.nativeEvent.coordinate.longitude);
    const coords = {
      latitude: e.nativeEvent.coordinate.latitude,
      longitude: e.nativeEvent.coordinate.longitude
    };
    Alert.alert(
      'Sprememba mesta',
      'Stanje v komori se bo spremenilo. Ali ste prepričani?',
      [
        {
          text: 'NE',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: 'OK', 
          onPress: () => {
            fetch(`http://192.168.88.253:5000/insert/${coords.longitude}/${coords.latitude}`);
            setSpinner(true);
            setTimeout(() => setSpinner(false), 2000);
          }
        },
      ],
      {cancelable: false},
    )
  }

  return (
    <View style={styles.container}>
      <Spinner
          visible={spinner}
          textStyle={styles.spinnerTextStyle}
      />
      <SearchBar
        containerStyle={{borderColor:'#eee', borderWidth:1}}
        placeholder="Vnesi mesto.."
        onChangeText={(e) => {setSearch(e)}}
        value={search}
        platform='android'
      />
      <MapView
        style={{width:'100%', height:'80%'}}
        initialRegion={{
        latitude: Number(latitudePress),
        longitude: Number(longitudePress),
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
        }}
        onPress={ (event) => addMarkerAndRequest(event) }
      >
        <MapView.Marker
            coordinate={{latitude: Number(latitudePress),
            longitude: Number(longitudePress)}}
            title={`ZŠ: ${latitudePress}, ZD: ${longitudePress}`}
         />
      </MapView>
      <Button 
        onPress={()=>Alert.alert(
          'Sprememba mesta',
          'Stanje v komori se bo spremenilo. Ali ste prepričani?',
          [
            {
              text: 'NE',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {
              text: 'OK', 
              onPress: () => {
                fetch(`http://192.168.88.253:5000/insertcity/${search}`);
                setSpinner(true);
                setTimeout(() => setSpinner(false), 2000);
                setSearch('');
              }
            },
          ],
          {cancelable: false},
        )}
        title='POTRDI'
      ></Button>
    </View>
  );
}

LinksScreen.navigationOptions = {
  title: 'Zemljevid',
};

Answer 1

您需要使用 context api 或 redux 来实现这一点。