在本机反应中制作滑块导航的最佳方法答案

【问题标题】：best way to make a slider navigation in react native在本机反应中制作滑块导航的最佳方法
【发布时间】：2020-07-23 08:31:09
【问题描述】：

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

但我不知道制作红色组件的任何线索。我在网上搜索，我找到了 react-navigation V5，但它看起来很复杂。

我还想创建一个水平的ScrollView，每次点击新的“页面”时，都会重新渲染所有当前视图。但这是个好办法吗？

感谢您的回答。

【问题讨论】：

标签： android react-native navigation expo

【解决方案1】：

我喜欢@mainak 关于使用react-native-tab-view 的建议。为了补充这个答案，我做了一个简单的实现，可以满足您的需求。

首先安装库：yarn 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,
  },
});

我已经定义了名为FirstRoute、SecondRoute 等的视图组件...但是将其更改为您希望在标签栏中拥有的屏幕。

这里的关键部分是renderTabBar，即传递给TabView 组件的自定义TabBar 组件。在 TabBar 组件上，我们有一个名为 scrollEnabled 的选项，如果设置为 true，则允许我们根据选项卡视图和选项卡的大小从左到右滚动条。

我已为每个选项卡定义了 120 的宽度，但您可能希望根据选项卡标签的大小调整此值。

您引用的活动标签栏下方的红色突出显示称为指示器，可以使用 indicatorStyle 属性设置样式：

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

有关更多信息，请查看 github 页面上的文档：https://github.com/satya164/react-native-tab-view。

【讨论】：

【解决方案2】：

您可以尝试使用 react-native-tab-view。我已经将它用于类似的工作。

【讨论】：