Question

我想使用react native导航在bottomTabs中创建topTops

请任何人帮助我

Answer 1

您可以使用react-native-tab-view https://github.com/react-native-community/react-native-tab-view

import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

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

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'first', title: 'First' },
      { key: 'second', title: 'Second' },
    ],
  };

  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={SceneMap({
          first: FirstRoute,
          second: SecondRoute,
        })}
        onIndexChange={index => this.setState({ index })}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    );
  }
}

navigationState-当前导航状态，应包含一个包含选项卡列表的routes数组，以及一个表示当前选项卡的index属性
- renderScene-回调，它返回一个React Element用作选项卡的场景
- onIndexChange-回调，用于在当前选项卡索引更改时，应更新导航状态

或者如果您想自己实现它，则可以在屏幕顶部创建顶部栏，并在屏幕中创建一个容器，然后单击顶部栏项目，只需替换该容器组件即可。

React Native：如何使用react-native导航在bottomTab中实现topTab

1 个答案: