Javascript 选项卡视图是否仅在滑动时渲染组件？

我正在使用的屏幕需要一些选项卡导航。它工作得很好，但有一个问题。仅当我按下要转到的选项卡时，它才会在滑动时呈现组件。它没有任何作用。 例：我在第三个标签上，我想进入第一个标签。 如果我点击标签1，什么都不会发生。在此过程中，我必须通过tab 2滑动到它。 我不想那样。这是我的密码

<TabView
   navigationState={this.state}
   renderScene={this.renderScene}
   onIndexChange={index => this.setState({ index })}
   initialLayout={{ width: Dimensions.get('window').width }}
 />

你可以用懒道具！ 如果要同时呈现所有选项卡，则应将false传递给lazy prop，否则传递true

请参阅文档

你可以使用懒惰道具！ 如果要同时呈现所有选项卡，则应将false传递给lazy prop，否则传递true

请参阅文档

---

当您点击另一个选项卡旁边的选项卡时，懒惰的道具会起作用，但当您有许多选项卡启用了道具

滚动功能，并且从第一个选项卡更改为最后一个选项卡时，懒惰的道具不起作用。为了解决这个问题，我使用了这个逻辑，它也使用了这个场景，并且一次最多呈现两个屏幕：

const renderScene = ({ route }) => {
    const shouldRenderRouteScreen = Math.abs(index - routes.indexOf(route)) < 2
    if (shouldRenderRouteScreen) {
      return <ScreenExample />;
    } else {
      return null;
    }
 }


   <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={(props) => (
         <TabBar {...props} scrollEnabled={true} />
      ...
  />

const renderScene=（{route}）=>{
const shouldrrenderroutescreen=Math.abs（index-routes.indexOf（route））<2
如果（应渲染箭头屏幕）{
返回；
}否则{
返回null；
}
}
(
...
/>
当您点击另一个选项卡旁边的选项卡时，懒惰道具可以工作，但是当您有许多选项卡启用了道具并从第一个选项卡更改为最后一个选项卡时，懒惰道具不起作用。为了解决这个问题，我使用了这个逻辑，它也会使用这个场景，并且一次最多呈现两个屏幕：

const renderScene = ({ route }) => {
    const shouldRenderRouteScreen = Math.abs(index - routes.indexOf(route)) < 2
    if (shouldRenderRouteScreen) {
      return <ScreenExample />;
    } else {
      return null;
    }
 }


   <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={(props) => (
         <TabBar {...props} scrollEnabled={true} />
      ...
  />

const renderScene=（{route}）=>{
const shouldrrenderroutescreen=Math.abs（index-routes.indexOf（route））<2
如果（应渲染箭头屏幕）{
返回；
}否则{
返回null；
}
}
(
...
/>
@Amraboelein请解释更多！我可以从一个组件滑动到另一个组件，但当我按tab title转到该组件时，什么都没有happens@AmrAboElenin您是否尝试了
SceneMap
？@amraboelein请解释更多！我可以从一个组件滑动到另一个组件，但当我按tab title转到该组件时，什么都没有发生@Amraboelein您是否尝试过
SceneMap
？
const renderScene = ({ route }) => {
    const shouldRenderRouteScreen = Math.abs(index - routes.indexOf(route)) < 2
    if (shouldRenderRouteScreen) {
      return <ScreenExample />;
    } else {
      return null;
    }
 }


   <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={(props) => (
         <TabBar {...props} scrollEnabled={true} />
      ...
  />