平面列表中的样式

我试图显示一个建筑物的图像连同地址,电话号码和几个链接在我的平面列表。如果我把这行放在我的单张清单上:

   <View style={{flex:1, flexDirection: 'row'}}>

然后它会在一行中显示图像以及所有地址行,而我看不到扁平列表上的电话号码和其他数据。如果我把它们放在不同的行中,那么我会得到图像和所有的数据,包括图像下面的地址、电话号码。我想把图片放在左边,就像它现在显示的那样,然后把地址,电话号码,在线和方向链接放在右边

_renderItem = ({item, index}) => {

 return(

   <View style={{ backgroundColor: index %2 ===0? '#FFD5C2':'#CC8B8C'}} >
                   <View style={{flex:1, flexDirection: 'row'}}>
                <Image source={require('../images/test.png')} style = {styles.imageView}/>
                <Text  style={styles.Address1}>{item.addr} </Text>

                <View style={styles.phoneImg}>
                <TouchableOpacity
                onPress={() => { this.handleClick(`tel:${item.phone}`)}}
            >
                <Image source={require('../images/call.png')} style={styles.actionImage}/>
                </TouchableOpacity>
                <Text style={styles.Address1}>{item.phone}</Text>
              </View>

                <View style={styles.AddressRow}>
                {
                        item.Online != ''? <TouchableOpacity  onPress={() => Linking.openURL(  item.Online )}>
                         <Image source={require('../images/www-icon.png')} style={styles.actionImage1}/>
                         </TouchableOpacity>: null 

                          }


              <TouchableOpacity  onPress={() => Linking.openURL(item.Online)}>
                    <Text style={styles.underLineText}>Online</Text>
                </TouchableOpacity>



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


                <Text style={styles.AddressSpace} >Miles:{dist}</Text>



               </View>


            </View>
            </View>


        );

  }

下面是这座大楼的手机图片

下面是手机上没有大楼的图像

我只想把大楼和地址电话号码分别显示在右边的几行上。我不想把它放在建筑物照片下面。下面是我的样式表:

const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10

},

item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  container2:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15
    },
    underLineText: {
      fontSize: 17,
      textDecorationLine: 'underline',
      color: 'black',

      alignSelf: 'center',
      marginLeft: 20,
      paddingTop:10

    },

    underLineTextOnline: {
      fontSize: 17,
      textDecorationLine: 'underline',
      color: 'black',

      alignSelf: 'center',
      marginLeft: 20,
      paddingTop:5

    },

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

      },

      Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 17,

        color: 'black'
    },
    SerContent:{
      fontWeight: 'bold',
      fontSize: 16,
      paddingTop: 10,
      alignSelf: 'center',
      color: 'black',
      paddingBottom: 10
  },
  Address1:{
    alignSelf: 'center',
    marginRight: 20,
    fontSize: 15,
    flexDirection:'column',
    color: 'black',
    marginLeft:10,
    textAlignVertical:'center'
},

AddressRow:{
  alignSelf: 'center',
  marginRight: 20,
  fontSize: 15,
  flexDirection: 'row',
  color: 'black'
},

phoneImg:{

  flexDirection: 'row',
  alignSelf: 'center',
  textAlignVertical:'center'
},
AddressSpace:{
  alignSelf: 'center',
  marginLeft: 20,
  fontSize: 15,
  marginLeft: 20,
  paddingTop:5,
  color: 'black'

},

actionImage:{
  flex:0,
  height:40,
  width:40,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center',
  marginTop:10,
  alignSelf:'center',
  flexDirection:'column',
  textAlignVertical:'center'
},

sepBoxes:{
  flex: 1,
  flexDirection: 'column'

},
box: {
  height: 55,
  width:400,


},
box1: {
  backgroundColor: 'white'
},

actionImage1:{
  flex:0,
  height:40,
  width:50,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center',

  alignSelf:'center',
  flexDirection:'column'
},

imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7

}


});