android - 在本机反应中制作滑块导航的最佳方法
问题描述
我尝试在 react-native 中重新创建此应用程序:
但我不知道制作红色组件的任何线索。我在互联网上搜索,发现 react-navigation V5,但它看起来很复杂。
我还想创建一个水平ScrollView
的,每次单击新的“页面”时,都会重新渲染所有当前视图。但这是一个好方法吗?
感谢您的回答。
解决方案
我喜欢@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
的自定义组件。在组件上,我们有一个名为的选项,如果设置为 true,则允许我们根据选项卡视图和选项卡的大小从左到右滚动条。TabBar
TabView
TabBar
scrollEnabled
我已经120
为每个选项卡定义了一个宽度,但是您可能希望根据选项卡标签的大小来使用这个值。
您引用的活动标签栏下方的红色突出显示称为指示器,可以使用indicatorStyle
道具设置样式:
indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
有关更多信息,请查看 github 页面上的文档:https ://github.com/satya164/react-native-tab-view 。
推荐阅读
- sql - 在 tsql 中检查一天到另一天的小时数
- javascript - 如何在 Angular 5 中减少供应商/脚本 bundle.js
- python - 向函数添加更多属性:时间和迭代改进
- json - Microsoft Graph 上的 AAD 应用注册
- ansible - Ansible 模块因“没有到主机的路由”而失败
- postgis - Postgis、Hibernate 和 QueryDSL SRID 混合
- android - 带有 WRAP_CONTENT 滚动子项和 CollapsingToolbarLayout 的 Coordinatorlayout
- python - duplicate a single column with several names in Pandas
- java - MacOS 系统上 MySQL Docker 容器 INFILE/ INTO OUTFILE 语句
- python - 从 Python POST 到 AWS Gateway API 到 Dynamodb