javascript - 如何确保react-native中的flex收缩(以及如何调试一般的react-native样式)？

Question

我正在运行一个使用 native-base 进行样式设置的 RN 应用程序。我的主页上有四个元素:标题、来自 vreact-native-tab-view 的选项卡 View 包含 ScrollView占据了大约 70% 的视口(viewport)，还有两个较小的 100% width底部的元素。

但是， ScrollView 填充了视口(viewport)的 100% 以上，并且两个较小的元素被推到底部。

我查看了我的元素检查器，可以将 flexShrink 应用于其中的一些 div s，但我不确定我的代码中是哪一个，因为它是 div当你使用react-native时见鬼了。 React devtools 也有同样的问题，只不过它是 View hell 。

那么，有两个问题:

1. 如何确保滚动容器不会填满页面上应有的内容？
2. 当 Chrome 和 React 开发工具都一团糟时，如何有效地调试 React Native？

作为引用，以下是我到目前为止的样式:

Home.tsx:

<View flex={1}> // applied a flex for the entire homepage
  <TabView
    navigationState={{ index, routes }}
    renderScene={renderScene}
    renderTabBar={renderTabBar}
    onIndexChange={setIndex}
    initialLayout={{ width: layout.width, height: "100%" }}
  />

  <View width="100%">
    <Center width="100%">
      <StrengthSlider />
    </Center>
    <AdMobBanner
      ...props
    />
  </View>
</View>

茶.tsx:

<View flex={1} bg="white">
  <ScrollCards teas={blackTeas} />
</View>

ScrollCards.tsx:

<ScrollView>
  <Center>
    {teas.length > 0 &&
      teas.map((teaObj) => (
        <TeaCard id={teaObj.id} teaData={teaObj.data} key={teaObj.id} />
      ))}
  </Center>
</ScrollView>

编辑:

代码沙盒链接:https://codesandbox.io/s/gracious-sammet-l4tqz?file=/src/App.js&resolutionWidth=402&resolutionHeight=675

请注意，admob 页脚保留在卡片内容下方。它应该具有粘性并始终位于屏幕底部。我还注意到，当我不使用 MainStackNavigator 中的 header 时页脚按预期工作 - 即它在底部保持粘性 - 但我不明白为什么使用页眉 ( AppBar ) 组件会干扰我的页脚。

Answer 1

获得所需结果的正确解决方案是将 flexBasis 添加到 TabView 中，如下所示:

<TabView 
  style={{ flexBasis: 0 }}
  // rest of the code
/> ​

为什么？ TabView 的默认样式为 flex: 1, Overflow: 'hidden' (请参阅 source code )，导致它扩展到其最大子级的大小。 flexBasis 可以防止这种情况发生并确保 tabview 获得正确的高度。

资源:这是一篇关于 flexBasis 与宽度/高度的好文章:https://mastery.games/post/the-difference-between-width-and-flex-basis/

---

在 React-Native 中调试样式并没有最好的开发人员体验。您可以使用一些东西来帮助您调试样式:

• RN 检查器:正如 Berci 提到的，React Native 有一个开发菜单，您可以在其中选择“显示检查器”，其作用类似于浏览器中的“检查元素”。它是调试您可以看到的元素的好工具，它还有助于调试输入/选项卡事件。

• 颜色:大多数情况下，我只是使用老式的彩色边框和背景来清楚地了解元素的位置及其大小/重叠。

• 注释和简化:随意注释掉您不感兴趣的组件，并用简单的彩色 View 替换复杂的组件/ View (例如 ScrollCards)。这可以帮助防止多种行为影响您尝试调试的内容

• 浏览器检查和 React 开发工具:如果您碰巧在浏览器中运行 RN 应用程序，那么熟悉这些工具将有助于您加载。请记住，React 和 React-Native 并不相同。

当您调试视觉效果时，最好的方法是从顶层开始并向下进行。为元素着色并随意注释元素，以便您更清楚地了解问题。继续深入挖掘，直到找到问题为止，不要害怕查看您使用的包的源代码，它通常有助于澄清(意外的)行为。