React native 如何将React钩子与React原生选项卡视图一起使用

我正在使用带有react钩子和typescript的react选项卡视图，但我有一些问题，有人可以帮我一下

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'reactnative';
import { TabView, SceneMap } from 'react-native-tab-view';



const FirstRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
    <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

interface Props {
    navigation: any;

}
export default function Home(props: Props) {


    const [rar, setRar] = useState({
        index: 0,
        routes: [
            { key: 'first', title: 'First' },
            { key: 'second', title: 'Second' },
        ]
    });

    var NativeAppEventEmitter = require('RCTNativeAppEventEmitter');
    return (
        <View>
            <TouchableOpacity onPress={props.navigation.openDrawer}>
                <Text>hola desde home</Text>
            </TouchableOpacity>

            <TabView
                navigationState={rar}
                renderScene={SceneMap({
                    first: FirstRoute,
                    second: SecondRoute,
                })}
                onIndexChange={index => ({ index })}
                initialLayout={{ width: Dimensions.get('window').width, height: 250 }}
            />


        </View>
    )
}
const styles = StyleSheet.create({
    scene: {
        flex: 0.3,
    },
});

import React，{useState}来自“React”；
从“reactnative”导入{视图、文本、TouchableOpacity、样式表、维度}；
从“反应本机选项卡视图”导入{TabView，SceneMap}；
const FirstRoute=（）=>(
);
const SecondRoute=（）=>(
);
界面道具{
导航：任何；
}
导出默认功能主页（道具：道具）{
const[rar，setRar]=useState({
索引：0，
路线：[
{键：'first'，标题：'first'}，
{键：'second'，标题：'second'}，
]
});
var NativeAppEventMitter=require（'rctnativeAppEventMitter'）；
返回(
霍拉德斯德之家酒店
（{index}）}
initialLayout={{width:Dimensions.get（'window'）。宽度，高度：250}
/>
)
}
const styles=StyleSheet.create({
场景：{
弹性系数：0.3，
},
});

import React，{useState，useffect}来自“React”；
从“./styles”导入{Container}；
从“react native”导入{View，StyleSheet，Dimensions}；
从“反应本机选项卡视图”导入{TabView，SceneMap}；
常数LatestRoute=（）=>(
);
常量FavoritesRoute=（）=>(
);
const AllRoute=（）=>(
);
const styles=StyleSheet.create({
场景：{
弹性：1，
},
});
导出默认函数Main（）{
常量初始状态={
索引：0，
路线：[
{key:'latest'，title:'latest'}，
{键：'收藏夹'，标题：'收藏夹'}，
{键：'all'，标题：'all'}，
],
};
常量[状态，设置状态]=使用状态（初始状态）；
功能选择选项卡（索引）{
this.initialState={
索引:索引,，
路线：[
{key:'latest'，title:'latest'}，
{键：'收藏夹'，标题：'收藏夹'}，
{键：'all'，标题：'all'}，
],
};
返回设置状态（此.initialState）；
}
返回(
选择选项卡（索引）}
initialLayout={{width:Dimensions.get（'window'）。width，height:Dimensions.get（'window'）。height}
/>
);
}

更改

onIndexChange={index => ({ index })}

到

---

这将修复您面临的错误

请提问并描述您的问题。什么不起作用？问题不清楚所遇到的问题。请全面编辑该问题。

onIndexChange={index => setRar({ ...rar, index })}