当状态改变时停止重新渲染的方法？ （反应原生）

Question

让我总结一下，我想要做的是当新闻被点击时，一个模态（在这种情况下我使用了一个库：react-native-modalize {{3 }}) 会显示点击新闻

的相应详细信息

为了使modal里面的内容是动态的，我用states来存储details，所以每当点击注册新闻时，一系列的details通过函数参数传递并存储在各自的状态中

>

问题是，每当顶层的状态发生变化时，整个组件都会自行刷新，从而导致如下问题：

场景 1：当用户滚动到滚动视图结束并按下其中一个新闻时，模态被调出，因为状态正在改变，整个应用程序刷新，滚动视图跳回到顶部。

app.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { useRef, useState, useEffect } from 'react';
import { AppLoading } from 'expo'
import { StyleSheet, Text, View, FlatList, SafeAreaView, ScrollView, Image,  TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Modalize } from 'react-native-modalize';
import { Ionicons } from '@expo/vector-icons';
import { render } from 'react-dom';

import Header from './components/Header';
import NuaDaily from './components/Daily';
import Content from './components/Content';

import moment from "moment";

const HomeStackScreen = () => {

  const [title, setTitle] = useState([])
  const [author, setAuthor] = useState([])
  const [publication, setPublication] = useState([])
  const [imageUrl, setImageUrl] = useState([])
  const [summary, setSummary] = useState([])

  const modalizeRef = useRef(null);
  const onOpen = (title, author, publication, imageUrl, summary) => {
    modalizeRef.current?.open();
    setTitle(title)
    setAuthor(author)
    setPublication(publication)
    setImageUrl(imageUrl)
    setSummary(summary)
  };

  return (
    <>

    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <View style={styles.container}>
          <Header />
          <NuaDaily modalize={onOpen} style={styles.nuadaily} />
          <Content modalize={onOpen} />
        </View>
      </ScrollView>
    </SafeAreaView>

    <Modalize snapPoint={650} modalTopOffset={10} ref={modalizeRef} style={{ width: '100%',   alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <View style={{padding: 20}}>
        <Image
          style={{width: 350, height: 200, zIndex: 1000, borderRadius: 8, marginTop: 10}}
          source={{ uri: `${imageUrl}` }}
        />
        <Text style={styles.modalTitle}>{title}</Text>

        <View style={styles.detailsBar}>
          <Text style={styles.modalAuthor}>{author}</Text>
          <Text style={styles.modalPublication}>{moment(publication).format("MM-DD-YYYY")}</Text>
        </View>

        <Text style={styles.modalSummary}>{summary}</Text>
      </View>
    </Modalize>
    </>
  )
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={
          {
            activeTintColor: '#00B2FF',
            inactiveTintColor: 'gray',
            showLabel: false,
            style: { height: 60, borderRadius: 0, backgroundColor: 'rgba(255, 255, 255, 0.85)'}
          }
        }
        showLabel = {false}
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === 'Home') {
              return <HomeIcon />
            }
          },
        })}
      >
        <Tab.Screen name="Home"
          component={
          HomeStackScreen
        } />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
});

每日（index.js）（在app.js上导入）

import React from 'react';
import { useState, useEffect } from 'react';
import {View, Text, FlatList, Image, ImageBackground, ScrollView, SafeAreaView, TouchableOpacity} from 'react-native';
import axios from 'axios';
import moment from "moment";
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import styles from './style';
import Dot from '../../assets/images/dot.svg';

const nuaDaily = ( props ) => {

    const Item = ({ title, author, publication, imageUrl, summary }) => (
        
        <View style={styles.item}>
            <TouchableOpacity onPress={()=>props.modalize(title, author, publication, imageUrl, summary)}>
                <Image
                    style={{width: 210, height: 200, zIndex: 1000, borderRadius: 8, marginTop: 10}}
                    source={{ uri: `${imageUrl}` }}
                />
                <Text style={ [styles.title, {fontFamily: 'Poppins'}]}>{title}</Text>
                <View style={styles.bottomBar}>
                    <Text style={styles.author}>{author}</Text>
                    <Text style={styles.publication}>{moment(publication).format("MM-DD-YYYY hh:mm")}</Text>
                </View>
            </TouchableOpacity>
        </View>
        
    );

    const renderItem = ({ item }) => {

        if(moment(item.publication).isSame(moment(), 'day')){
            return <Item title={item.title} author={item.newsSite} publication={item.publishedAt} imageUrl={item.imageUrl} summary={item.summary} />
        }else{
            // return <Item title={item.title} author={item.newsSite} publication={item.publishedAt} imageUrl={item.imageUrl} summary={item.summary} />
        }
        
    };

    const [data, setData] = useState([])

    useEffect(() => {

        axios.get(APIURL)
        .then((res) => {
            setData(res.data)
        })
        .catch((err) => {
            console.log(`error calling API ${err}`)
        })

    },[])
        return (
            <View style={styles.container}>
                <View style={styles.containerTitle}>
                    <Dot style={styles.dot} />
                    <Text style={ [styles.PrimaryText , {fontFamily: 'Quicksand'}]}>NUA Daily</Text>
                </View>
                <FlatList
                    showsHorizontalScrollIndicator={false}
                    horizontal={true}
                    data={data}
                    renderItem={renderItem}
                    style={styles.flatList}
                />
            </View>
        )
}

export default nuaDaily;

https://github.com/jeremybarbet/react-native-modalize