ScrollView Pagination заставляет все дочерние элементы повторно отображать

Проблема:

При использовании ScrollView в ReactNative для горизонтальной разбивки на страницы он повторно отображает все дочерние элементы, но я хотел бы сохранить значения состояния определенных локальных полей ввода и локальных переменных дочерних компонентов.

В приведенном ниже коде, если я находился в середине обновления TextInput в NotesSection, но хотел вернуться к BatchSection, чтобы просмотреть некоторые метаданные, код повторно отображает NotesSection и сбрасывает локальное состояние, содержащее текстовое значение.

Диагноз:

Я очень новичок в React и React Native, но я думаю, что это происходит из-за родительской переменной состояния «horizontalPos», которая принимает целое число, чтобы отразить, какая страница находится в фокусе. Это просто используется в компоненте ProductHeader для выделения цветной нижней границы, показывающей пользователю своего рода небольшое «меню» в верхней части экрана. Состояние «horizontalPos» можно обновить двумя способами:

1. Первый — просто щелкнуть нужный заголовок (TouchableOpacity) в ProductHeader, который вызывает изменение состояния и использует useRef для автоматического перемещения ScrollView.
2. Второй вариант — когда пользователь проводит пальцем по ScrollView. Использование OnScroll для запуска функции «handleHorizontalScroll», которая, в свою очередь, устанавливает состояние «horizontalPos», используя простую математику из contentOffset.x.

Вопрос/Решение:

Если бы состояние «horizontalPos» было ВНУТРИ ProductHeader, я подозреваю, что это решило бы проблему, но я не могу понять, как это сделать, поскольку я не верю, что возможно передать функцию дочернему элементу на основе изменения в родительский компонент.

Я зависим от регистрации OnScroll в основном ScrollView, а остальные компоненты также должны находиться внутри основного ScrollView, но я не хочу, чтобы они повторно отображались каждый раз, когда обновляется состояние «horizontalPos».

Код:

const ProductScreen = (props) => {
    const [horizontalPos, setHorizontalPos] = useState(0)
  
    const scrollRef = useRef()

    const toggleHorizontal = (page) => {
        setHorizontalPos(page)
        scrollRef.current.scrollTo({x:page*width, y:0, animated:false})
    }

    const handleHorizontalScroll = (v) => {
        const pagination = Math.round(v.nativeEvent.contentOffset.x / width)
        if (pagination != horizontalPos){
          setHorizontalPos(pagination)
        }
    }

    const ProductHeader = () => {
        return(
            <View style = {styles.scrollHeaderContainer}>
                <TouchableOpacity style = {[styles.scrollHeader, horizontalPos == 0 ? {borderColor: AppGreenDark,} : null]} onPress = {() => toggleHorizontal(0)}>
                    <Text style = {styles.scrollHeaderText}>Meta Data</Text>
                </TouchableOpacity>
                
                <TouchableOpacity style = {[styles.scrollHeader, horizontalPos == 1 ? {borderColor: AppGreenDark,} : null]} onPress = {() => toggleHorizontal(1)}>
                    <Text style = {styles.scrollHeaderText}>{"Notes"}</Text>
                </TouchableOpacity>
            </View>
        )
    }

    return (
        <View style = {styles.container}>
            <ProductHeader/>

            <ScrollView
                ref = {scrollRef}
                decelerationRate = {'fast'}
                horizontal = {true}
                showsHorizontalScrollIndicator = {false}
                snapToInterval = {width}
                onScroll = {handleHorizontalScroll}
                scrollEventThrottle = {16}
                disableIntervalMomentum = {true}
                style = {{flex: 1}}
            >
                <View style = {[styles.horizontalScroll]}>
                    <View style = {styles.mainScrollView}>
                        <BatchSection/>
                    </View>

                    <ScrollView style = {styles.notesScrollView}>
                        <NotesSection/>
                    </ScrollView>
                </View>

            </ScrollView>
        </View>
    )
}