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

Question

我正在为我的应用制作自定义抽屉导航。在我使用背景图片的地方（它不会占用完整 space），在背景图片上我使用了另一张图片。之后我必须在背景图片下方显示一些内容。

这是我为抽屉导航制作的组件。我不确定这是否是正确的方法。您可以通过将此代码粘贴到 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 views 来控制一切：

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' 来替换该视图中的项目。

尝试遵循此 link：https://facebook.github.io/react-native/docs/flexbox 我希望它能帮助你。

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

How to Show text below ImageBackground in react native for drawer navigation?

react-native

imagebackground