如何在抽屉导航的本机反应中显示图像背景下方的文本

Question

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

这是我为抽屉导航制作的组件。我不确定这是否是正确的方法。您可以通过将此代码粘贴到世博应用中来获得即时结果。

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

好吧，这样使用边距并不好。最好的方法是使用灵活的内部视图控制所有内容：

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我希望它对你有所帮助。