如何将React Hooks与react-native-tab-view一起使用

Question

red error screen 1

Cannot read property 'configureProps' of undefined

我正在使用react-tab-view和react Hooks和typescript，但我有一些问题，有人可以帮我……

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,
    },
});

Answer 1

变化

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

至

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

这应该可以修复您所面临的错误

Answer 2

​

import React, { useState, useEffect } from 'react';
import { Container } from './styles';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

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

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

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

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});
export default function Main() {

  const initialState = {
    index: 0,
    routes: [
      { key: 'latest', title: 'Latest' },
      { key: 'favorites', title: 'Favorites' },
      { key: 'all', title: 'All' },
    ],
  };

  const [ state, setState ] = useState(initialState);

  function selectTab ( index ) {
    this.initialState = {
      index: index,
      routes: [
        { key: 'latest', title: 'Latest' },
        { key: 'favorites', title: 'Favorites' },
        { key: 'all', title: 'All' },
      ],
    };
    return setState(this.initialState);
  }
  
  return (
    <Container>
      <TabView
        navigationState={state}
        renderScene={SceneMap({  latest: LatestRoute,  favorites: FavoritesRoute, all: AllRoute  })}
        onIndexChange={ (index) => selectTab(index) }
        initialLayout={{ width: Dimensions.get('window').width, height : Dimensions.get('window').height }}
      />
    </Container>
  );
}

​