截取TabView上的自定义操作

import React from 'react';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import { View, Text, Button } from 'react-native';

const FirstRoute = () => (
  <View style={{ flex: 1 }}>
    <Text>First Route</Text>
  </View>
);

const SecondRoute = () => (
  <View style={{ flex: 1 }}>
    <Text>Second Route</Text>
    <Button title="Custom Action" onPress={() => alert('Custom action triggered!')} />
  </View>
);

const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};

const App = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: Dimensions.get('window').width }}
      tabBarPosition="bottom"
      renderTabBar={(props) => (
        <TabBar
          {...props}
          activeColor="tomato"
          inactiveColor="gray"
          indicatorStyle={{ backgroundColor: 'tomato' }}
          style={{ backgroundColor: 'white' }}
        />
      )}
    />
  );
};

export default App;

<Button title="Custom Action" onPress={() => alert('Custom action triggered!')} />

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon name="star" size={20} color="tomato" />