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

那样使用margin不好。最好的方法是使用flex内部视图控制一切：

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 希望对您有帮助。

如何在本机抽屉导航中的ImageBackground下的ImageBackground下显示文本？

1 个答案: