如何在 ImageBackground 下方显示文本以响应本机以进行抽屉导航？

Question

我正在为我的应用制作自定义抽屉导航。在我使用背景图像的地方（它不会占用全部空间），在背景图像上我使用的是另一个图像。 之后我必须在背景图片下方显示一些内容。

这是我为抽屉导航制作的组件。我不确定这是否是正确的方法。将此代码粘贴到 expo 应用程序中即可获得即时结果。

import React from 'react';
import { View, Text, Button, ImageBackground, Image } from 'react-native';

class Sidebar extends React.Component {
  render() {
    return (
      <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{ width: '100%', height: '60%' }}>
        <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} style={{width: 200, height: 200, marginLeft: 20}} />
          <Text style={{marginTop: 70, marginLeft: 20}}>Information</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Settings</Text>
          <Text style={{marginTop: 10, marginLeft: 20}}>Favorite</Text>
      </ImageBackground>
    );
  }  
}

export default Sidebar

获得这种结果的更好方法是什么。这可以给我的文本留出与背景图片下方一样多的边距

Answer 1

这样使用边距不好。最好的方法是使用 flex inside view 来控制一切：

render() {
   return (
      <View style={{flex:1}}>
      <View style={{flex:1.5, justifyContent:'center', alignItems:'center'}}>
        <ImageBackground source={{uri: 'https://images.pexels.com/photos/1738762/pexels-photo-1738762.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}} style={{width: 100, 
        height: 100}}/>
      </View>
     <View style={{flex:3}}>  
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Information</Text>
          </View>
          <View style={{flex:1, backgroundColor:'red'}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1 ,flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Settings</Text>
          </View>
          <View style={{flex:1,}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
              />
          </View>
      </View>
      <View style={{flex:1, flexDirection:'row'}}>

          <View style={{flex:2, justifyContent: 'center', alignItems:'flex-end', backgroundColor:'blue'}}>
              <Text >Favorite</Text>
          </View>
          <View style={{flex:1}}>
              <Image
              source={{uri: 'https://facebook.github.io/react/logo-og.png'}}

              />
          </View>
      </View>


     </View>

    </View>
    );
  } 

您可以在文本部分上方的视图中使用 justifyContent、alignItems 和 flex 来控制文本。您可以使用flex-start 和flex-end 或center' 来替换该视图中的项目。

尝试点击此链接：https://facebook.github.io/react-native/docs/flexbox 我希望它对你有帮助。