Question

我想把公司的标识放在从左上角到右上角的宽度为10的范围内。下面是我的代码。我的图片显示不正常。它显示在屏幕中间，宽度超出手机。如果我放置位置：绝对，则图像会从手机中消失。

  /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();

const styles = StyleSheet.create({
  card: {
    marginTop: 10,
    paddingBottom: 20,
    marginBottom: 20,
    borderColor: 'lightgrey',
    borderWidth: 0.5,
  },

  container: {     
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4F6D7A', 
    height: 550,
    alignSelf:'center',
    width:500,
    position: 'relative',
  }, 

  title1: {
      top: 10,
      left: 80,
      fontSize: 24,
  },
  title2: {
      top: 35,
      left: 82,
      fontSize: 18,
  },
  image: {
      flex: 0,
      height: 100,
      width: 333,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
  },
  closeIcon: {
      position: 'absolute',
      top: 5,
      left: 295,
      color: 'rgba(233,166,154,0.8)',
      backgroundColor: 'rgba(255,255,255,0)',
  },  
  icon: {
      position: 'absolute',
      top: 15,
      left: 0,
      color: 'white',
      backgroundColor: 'rgba(255,255,255,0)',
  },
  textArea: {
      flexDirection: 'row',
      paddingLeft: 20,
      paddingTop: 10,
      width: 260,
  },
  textIcons: {
      color: '#26a69a',
  },
  actionArea: {
      paddingTop: 10,
      flexDirection: 'row',
      justifyContent: 'space-around',
      alignItems: 'center',
  },

  title:{
    justifyContent: 'center',
    paddingTop: 10,
    alignItems: 'center',
    alignSelf: 'center',
    fontWeight: 'bold',
    fontSize: 22,
    color: '#F5FCFF', 
    },

    SerContent:{
        fontWeight: 'bold',
        fontSize: 16,
        paddingTop: 10,
        alignSelf: 'center',
        color: '#F5FCFF'
    },

    underLineText: {
        fontSize: 17,
        textDecorationLine: 'underline',
        color:  '#F5FCFF',
        fontWeight: 'bold',
        textAlign: 'center',

      },

      dir:{
        flexDirection:'row',
        paddingTop: 30,
        textAlign: 'center',
        fontSize: 17,
        alignSelf: 'center'

    } ,   

    Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 17,
        fontWeight: 'bold',
        color:  '#F5FCFF',
    },
    toolbar: {
        flexDirection: 'row',   //Step 1

      },
      toolbarTitle:{
        width: 10,
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        flex:1 ,
         position:'absolute'              //Step 3
      },

});
class ServiceDetail extends Component {
    handleClick = (link) => {
        Linking.canOpenURL(link).then(suppported => {
            if (supported) {
                Linking.openURL(link);
            } else {
                console.log('Don\'t know how to open URI: ' + link);
            }
        });
    };



  render() {




var destUrl = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr1 + '+' + 'field'
var destUrl1 = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr2 + '+' + 'field'
 return (

      <ScrollView  showsVerticalScrollIndicator={false}>

        <View style={styles.container}>
        <View style={styles.toolbar}>
              <Image 
                   resizeMode='contain'
                   style={styles.toolbarTitle} 
                  source={require('../Resources/LogoWithDesc.jpg')} />
           </View>



        <SimpleIcon name={'close'} size={30} style={styles.closeIcon}
            onPress={() => this.props.noneSelected()} />
        <Text  style={styles.title}>{this.props.services.ser}</Text>
        <Text style={styles.SerContent} >Service is available in the following locations:</Text>
        <View style={styles.dir}>
        <Text style={styles.Address1}> {this.props.services.Location}:</Text>   


        <TouchableOpacity  onPress={() => Linking.openURL(destUrl)}>
                <Text style={styles.underLineText}>Directions</Text>
        </TouchableOpacity>
        </View>
        <View style={styles.dir}>
        <Text  style={styles.Address1}>{this.props.services.SecondLoc}:</Text> 

        <TouchableOpacity onPress={() => Linking.openURL(destUrl1)}></TouchableOpacity>
        <TouchableOpacity  onPress={() => Linking.openURL(destUrl1)}>
                <Text style={styles.underLineText}>Directions</Text>
        </TouchableOpacity>
        </View>


        </View>

      </ScrollView>
    );
  }
}


const mapStateToProps = state => {
    return { 
        services: state.serviceSelected
     };
  };



export default connect(mapStateToProps, actions)(ServiceDetail);

任何帮助都将受到高度赞赏。

Answer 1

请尝试增加flex到Image并添加position属性。

  image: {
  flex: 1,
  height: 200,
  backgroundColor: 'transparent',
  justifyContent: 'center',
  alignItems: 'center',
  width: 333,
  position: 'absolute',
  },

请应用容器的宽度并添加position属性。

   container: {     
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#4F6D7A', 
    height: 200,
    alignSelf:'center'
    width: 333,
    position: 'relative',
    },

您还可以使用flexbox编辑布局 https://facebook.github.io/react-native/docs/flexbox.html

在像素手机中的背景颜色的样式

1 个答案: