將狀態傳遞給按鈕時導航到另一個螢屏

所以我最初需要在從一個螢屏導航到另一個螢屏時傳遞狀態，因為我認為這足以更新按鈕和螢屏本身。但是，控制狀態的按鈕不會隨著螢屏更新。

在下面提供的演示中（我也在這里包含了代碼），您可以看到，當從 Screen3 導航時，狀態會更新，以便呈現紅色螢屏，但頂部的按鈕也不會更新。

如何在更新螢屏的同時更新按鈕？ 我需要從 screen3 轉到紅色螢屏，而頂部的按鈕顯示我們也在紅色螢屏上。

這是演示以及下面的代碼。請記住，您必須在 IOS 或 android 上運行小吃，并且您需要運行 Expo 版本 42（位于螢屏右下方）

感謝您的任何見解！我比你知道的更欣賞它。

主頁.js

import Slider from './components/slider'

const Home = ({ route }) => {
  const [isVisile, setIsVisible] = React.useState(true);
  const [whichComponentToShow, setComponentToShow] = React.useState("Screen1");

  React.useEffect(() => {
    if(route.params && route.params.componentToShow) {
      setComponentToShow(route.params.componentToShow);
    }
  }, [route.params]);


  const goToMap = () => {
    setComponentToShow("Screen2");
  }

  const goToList = () => {
    setComponentToShow("Screen1");
  }

  return(
    <View style={{backgroundColor: '#d1cfcf' ,flex: 1}}>
      {whichComponentToShow === 'Screen1' && <ListHome />}
      {whichComponentToShow === 'Screen2' && <MapHome />}
      <View style={{position: 'absolute', top: 0, left: 0, right: 1}}>
        <Slider
          renderMap={goToMap}
          renderList={goToList}
        />
      </View>
    </View>
  );
}

Screen3.js

const Screen3 = (props) => {
  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate('Home', {
      screen: 'Home',
      params: {
        componentToShow: 'Screen2'
      }
    });
  }
  
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <TouchableOpacity onPress={onPress}>
        <Text style={{ color: 'black', fontSize: 25 }}>
          Navigate to home and change to map screen
        </Text>
      </TouchableOpacity>
    </View>
  );
};

最后 Slider.js

const Slider = (props) => {
  
  const [active, setActive] = useState(false)
  let transformX = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (active) {
      Animated.timing(transformX, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true
      }).start()
    } else {
      Animated.timing(transformX, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true
      }).start()
    }
  }, [active]);

  const rotationX = transformX.interpolate({
    inputRange: [0, 1],
    outputRange: [2, Dimensions.get('screen').width / 4]
  })


  return (
       code for animation
     )

uj5u.com熱心網友回復：

您的Slider組件需要監聽螢屏焦點useFocusEffect并做出相應的反應。我添加了新的道具active來檢測地圖螢屏是否處于活動狀態。

滑塊.js

import * as React from 'react';
import  { useState, useEffect, useRef } from 'react'
import { View, Text, StyleSheet, Animated, TouchableOpacity, SafeAreaView, Dimensions,  } from 'react-native';
import {
  scale,
  verticalScale,
  moderateScale,
  ScaledSheet,
} from 'react-native-size-matters';
import { useFocusEffect } from '@react-navigation/native';

const Slider = (props) => {
  
  const [active, setActive] = useState(false)
  let transformX = useRef(new Animated.Value(0)).current;


useFocusEffect( React.useCallback(()=>{
    setActive(Boolean(props.active))
    console.log()
  },[props.active]))
    

  useEffect(() => {
    if (active) {
      Animated.timing(transformX, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true
      }).start()
    } else {
      Animated.timing(transformX, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true
      }).start()
    }
  }, [active]);

  const rotationX = transformX.interpolate({
    inputRange: [0, 1],
    outputRange: [2, Dimensions.get('screen').width / 4]
  })


  return (
    <SafeAreaView style={{
      alignItems: 'center',
      backgroundColor:'transparent'
    }}>
      <View style={{
        flexDirection: 'row',
        position: 'relative',
        height: 45,
        width: 240,
        borderRadius: 10,
        backgroundColor: 'white',
        marginHorizontal: 5
      }}>
        <Animated.View
          style={{
            position: 'absolute',
            height: 45 - 2*2,
            top: 2,
            bottom: 2,
            borderRadius: 10,
            width: Dimensions
            .get('screen').width / 3 - 3.5 ,
            transform: [
              {
                translateX: rotationX
              }
            ],
            backgroundColor: '#d1cfcf',
          }}
        >
        </Animated.View>
        <TouchableOpacity style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }} onPress={() => {setActive(false); props.renderList() }}>
          <Text>
            List
        </Text>
        </TouchableOpacity>
        <TouchableOpacity style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }} onPress={() => {setActive(true); props.renderMap() }}>
          <Text>
            Map
        </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}


export default Slider

我更新滑塊組件Home.js如下。

 <Slider
          renderMap={goToMap}
          renderList={goToList}
          active={route.params && route.params.componentToShow==='Screen2'}
        />

檢查完整的作業小吃：https : //snack.expo.dev/@emmbyiringiro/283f93

標籤：反应 反应原生

上一篇：如何從Prometheus服務器獲取按特定標簽過濾的所有指標名稱

下一篇：使用react-native-router，重定向到不同的頁面不起作用