javascript - does the tabview renders components on swipe only?
问题描述
The screen i am working on needs some tab navigation . its working great but there is one problem. It renders the component on swipe only when i press on the tab i want to go to . it does not do anything. Ex: I am on tab number 3 and i want to go to tab 1. If i click on tab 1 , nothing happens . i have to swipe to it passing tab 2 in the process . I don't want that . Here's my code.
<TabView
navigationState={this.state}
renderScene={this.renderScene}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
/>
render scene function
renderScene = ({ route, jumpTo }) => {
switch (route.key) {
case 'activity':
return <ProfileActivity jumpTo={jumpTo} />;
case 'circles':
return <ProfileCircles jumpTo={jumpTo} />;
case 'friends':
return <ProfileFriends jumpTo={jumpTo} />;
default:
return null;
}
};
state
state = {
index: 0,
routes: [
{ key: 'activity', title: 'Activity' },
{ key: 'circles', title: 'Circles' },
{ key: 'friends', title: 'Friends' }
]
};
解决方案
你可以使用惰性道具!如果你想一次渲染所有选项卡,那么你应该将 false 传递给惰性属性,否则传递 true。
请参阅文档
https://github.com/react-native-community/react-native-tab-view/blob/master/README.md
推荐阅读
- css - 如何在 CSS 中定位和更改来自(react.js)Formik 的类元素?
- javascript - 使用具有动态文本的相同角度模板
- c# - 登录表单,如何在一个登录表单中使用 3 个表登录?
- javascript - 使用 RxJS / TypeScript / JavaScript 将行转换为列
- twitter-bootstrap - Bootstrap - 导入引导 scss 时 col-size 不起作用
- google-apps-script - 为 Google 表格创建可安装触发器时出现意外错误
- python - 尝试将用户输入同时存储到数组和数据库中
- apache-spark - 可以使用 spark 配置配置 Beam 便携式跑步者吗?
- r - 如何在 R 中创建一个 for 循环来运行一个简单的随机样本并计算每个集合的平均值
- python - 如何使用嵌套字典列表