如何确保react-native中的伸缩(以及如何调试一般的react-native样式)?

我正在运行一个使用原生样式的RN应用程序。我的主页上有四个元素:一个标题，一个来自vreact-native-tab-view的选项卡视图，其中包含一个ScrollView，占视窗的70%左右，以及底部的两个较小的100%width元素。

然而，滚动视图填充了超过100%的视口，两个较小的元素被推到底部。

我看了我的元素检查器，可以应用flexShrink到一些许多divs，但我不确定哪一个是在我的代码，因为它是div地狱当你使用react-native。React devtools也有同样的问题，除了它是View地狱。

那么，两个问题:

我怎么能确保滚动容器不填满超过它应该在页面上?
当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>

Teas.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>

编辑:

Code Sandbox link: https://codesandbox.io/s/gracious-sammet-l4tqz?file=/src/App.js&resolutionWidth=402&resolutionHeight=675

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

获得您想要的结果的正确解决方案是将flexBasis添加到TabView中，如:

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

为什么?TabView的默认样式为flex: 1, overflow: 'hidden'(请参阅源代码)，使其扩展到其最大子节点的大小。flexBasis可以防止这种情况，并确保tabview获得正确的高度。

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

在React-Native中调试样式没有最好的开发人员体验。这里有一些东西可以帮助你调试样式:

RN inspector:正如Berci提到的，React native有一个开发菜单，你可以在其中选择"show inspector"这有点像"inspect element"在浏览器中。这是一个调试元素的好工具，它也有助于调试输入/选项卡事件。
Color:大多数情况下我只是使用老式的彩色边框&背景以获得元素所在位置的清晰视图&他们的大小/重叠。
的评论,简化:随意注释掉你不感兴趣的组件，用简单的彩色视图替换复杂的组件/视图，比如ScrollCards。这可以帮助防止多个行为影响你试图调试的东西
浏览器检查&React devtools:如果您碰巧在浏览器中运行RN应用程序，那么熟悉这些工具将有助于您加载。请记住React &React-Native不一样。

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

您可以尝试替换

<View flex={1}> // applied a flex for the entire homepage

inHome.tsxwith

<View flex="1 1 0">

这里的工作示例(是您的代码修改后的行)。

至于调试，我只能建议react native调试页面上已经建议的内容。你试过React Developer Tools了吗?在chrome中，你也可以添加它作为扩展从这个链接。

我不确定chrome扩展和npm包之间是否有任何区别，但扩展至少对我来说足够了(目前)。

唯一的问题是,我也努力调试以来codesandbox扩展绝对不是在javascript在线编辑(但可能npm包并不为这个特定的情况下)

试试这个- https://snack.expo.dev/fL0OgQ9uS

import React from 'react';
import { View, Image, StyleSheet,ScrollView,Text } from 'react-native';
const styles = StyleSheet.create({
container: {
paddingTop: 50,
flex:1,
backgroundColor:'aqua',
},
tinyLogo: {
width: 200,
height: 200,
},
header:{
backgroundColor:'green',
paddingBottom:20,
},
footer:{
backgroundColor:'green',
paddingTop:20,
}
});
const DisplayAnImage = () => {
return (
<View style={styles.container}>
<View style={styles.header}><Text>header</Text></View>
<ScrollView>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>
<Image
style={styles.tinyLogo}
source={require('@expo/snack-static/react-native-logo.png')}
/>

</ScrollView>
<View  style={styles.footer}><Text>footer</Text></View>
</View>
);
}
export default DisplayAnImage;

相关内容

最新更新

热门标签：