Android 在react native中创建滑块导航的最佳方法

我尝试在react native中重新创建此应用程序：

但是我没有任何制造红色组件的线索。 我在互联网上搜索，发现了react navigation V5，但它看起来很复杂

我还想创建一个水平的

滚动视图

，每次我点击新的“页面”，都会重新显示所有当前视图。但这是个好办法吗

---

感谢您的回答。

您可以尝试使用react native选项卡视图。我也曾在类似的工作中使用过它。

我喜欢@mainak建议使用

react native tab view

。为了补充这个答案，我做了一个简单的实现，可以满足您的需要

首先安装库：

warn add react native tab view

或

npm i react native tab view--save

然后你可以这样做：

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

const initialLayout = {width: Dimensions.get('window').width};

const renderTabBar = (props) => (
  <TabBar
    {...props}
    tabStyle={{width: 120}}
    scrollEnabled={true}
    indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
  />
);

const App = () => {
  // ...
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
    {key: 'third', title: 'Third'},
    {key: 'fourth', title: 'Fourth'},
    {key: 'fifth', title: 'Fifth'},
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    third: ThirdRoute,
    fourth: FourthRoute,
    fifth: FifthRoute,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderTabBar={renderTabBar}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
};


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

---

有关更多信息，请查看github页面上的文档：

indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}