React Native中的空白

如何解决React Native中的空白

我是完全陌生的，我想对本机做出反应，并尝试在文本后对齐每个图像，但是我却得到了这个奇怪的空白，我不知道该如何消除。这就是现在的样子：

这是我的js代码：

    export default function App() {
      return (
        <ScrollView>
          <View style={[styles.container]}>
            <Text style={styles.title}>Mt. Fuji</Text>
            <Image source={require("./images/pic.jpeg")} style={styles.uriImg} />
            <TextImg
              text="Rick & Morty"
              imageUri={
                "https://m.media-amazon.com/images/M/MV5BZjRjOTFkOTktZWUzMi00YzMyLThkMmYtMjEwNmQyNzliYTNmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ@._V1_.jpg"
              }
              style={[styles.text,styles.propImg]}
            />
            <TextImg
              text="The Butterfly Nebula"
              imageUri={
                "https://www.dualdove.com/wp-content/uploads/2020/02/supernova-dying-star-in-the-shape-of-a-butterfly.jpg"
              }
              style={[styles.text,styles.propImg]}
            />
          </View>
        </ScrollView>
      );
    }

是另一个名为comp的文件中的自定义组件。

这是我的CSS：

    Const styles = StyleSheet.create({
      uriImg: {
        width: 350,height: 200,top:110,marginBottom:120
      },propImg: {
        width: 350,marginBottom:30
      },container:{
        backgroundColor: '#a1c5ff',alignItems: 'center',flex:1,},title: {
        top:100,backgroundColor: '#61dafb',color: '#20232a',textAlign: 'center',fontSize: 50,fontWeight: 'bold'
      },text:{
        color: '#ffffff',fontSize: 30,fontFamily: 'Cochin',}
    });

谢谢！

解决方法

您是否尝试更改模式代码？

类似这样

<ScrollView >
        <View> 
          <View>
          <Text>title</Text>
          <Image ..... />
          <Text/> 
           
        </View> 
      </ScrollView>

,

在“ TextImg”内部，您同时为“图片”和“文字”提供了_png.py。
这使它们两个的高度均为200px。

也许尝试像这样更改您的“ TextImg”：

styles.propImg

它应该解决这个问题。