Question

我在我的应用中遇到了包括计时器在内的问题。这是我的默认应用程序最初的样子，下面是相应的代码

    return (
    <TopTab.Navigator
      tabBarOptions={{
        scrollEnabled: true,
      }}>
          <TopTab.Screen
            name="FIRST TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="SECOND TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="THIRD TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="FOURTH TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="FIFTH TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
    </TopTab.Navigator>
)

现在计时器必须包含在编写上述代码的同一个文件中。我尝试这样做，下面是应用程序的呈现方式及其代码。由于包含计时器，所有选项卡屏幕均未呈现。我该如何解决？

    return (
    <ScrollView style={{flex:1, height: 50}}>
    <TopTab.Navigator
      tabBarOptions={{
        scrollEnabled: true,
      }}>
          <TopTab.Screen
            name="FIRST TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="SECOND TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="THIRD TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="FOURTH TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
          <TopTab.Screen
            name="FIFTH TAB"
            component={TabDashboardDetail}
            listeners={{ tabPress: e => console.log('Tab press', e.target), }}
          />
    </TopTab.Navigator>
    <View>
    <Text>
      {`${time.hours < 10 ? '0' + time.hours : time.hours} : ${time.minutes < 10 ? '0' + time.minutes : time.minutes} : ${time.seconds < 10 ? '0' + time.seconds : time.seconds}`}
    </Text>
  </View>
  </ScrollView>
)

Answer 1

我认为您不应该将 TabView 放在 ScrollView 中。

你为什么给 ScrollView 固定高度 50？

如果计时器在所有屏幕上都是通用的，那么您可以改为这样做。

    return (
<>
<TopTab.Navigator
  tabBarOptions={{
    scrollEnabled: true,
  }}>
      <TopTab.Screen
        name="FIRST TAB"
        component={TabDashboardDetail}
        listeners={{ tabPress: e => console.log('Tab press', e.target), }}
      />
      <TopTab.Screen
        name="SECOND TAB"
        component={TabDashboardDetail}
        listeners={{ tabPress: e => console.log('Tab press', e.target), }}
      />
      <TopTab.Screen
        name="THIRD TAB"
        component={TabDashboardDetail}
        listeners={{ tabPress: e => console.log('Tab press', e.target), }}
      />
      <TopTab.Screen
        name="FOURTH TAB"
        component={TabDashboardDetail}
        listeners={{ tabPress: e => console.log('Tab press', e.target), }}
      />
      <TopTab.Screen
        name="FIFTH TAB"
        component={TabDashboardDetail}
        listeners={{ tabPress: e => console.log('Tab press', e.target), }}
      />
</TopTab.Navigator>
<Text>
  {`${time.hours < 10 ? '0' + time.hours : time.hours} : ${time.minutes < 10 ? '0' + time.minutes : time.minutes} : ${time.seconds < 10 ? '0' + time.seconds : time.seconds}`}
</Text>
  </>
)

不确定如何在应用中正确包含 Scrollview

1 个答案: