Question

我正在尝试在FlatList中显示建筑物的图像以及地址，电话号码和一些链接。如果我把这行放在我的flatList中：

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

然后它将图像与所有地址行一起显示在一行中，而我在flatList上看不到电话号码和其他数据。如果将它们放在单独的行中，那么我会得到图像以及图像下面的所有数据，包括地址，电话号码。我想像现在显示的那样将图像放在左侧，然后在其右侧显示地址，电话号码和“在线”和“方向”链接

下面是我的带有样式表和图像的代码：

_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

}


});

任何帮助将不胜感激。

Answer 1

一种可能的解决方案是使用flexbox并创建一个视图，该视图将您想要的所有文本和小图像封装在右侧。该视图将保留在图像旁边，占据其剩余的所有空间（通过设置flex：1），并且两个视图都将保留在具有flex-direction行的视图中（因此，图像位于左侧，右边的所有其他内容）

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flexDirection: "row", alignItems: "center", backgroundColor: "red"}}>
         <Image source={{uri: "https://via.placeholder.com/80x140"}} style={{width: 50, height: 150}} />

         <View style={{ backgroundColor: "green", flex: 1, alignItems: "center"}}>
            <Text>Building address</Text>

            <Image source={{ uri: "https://via.placeholder.com/40x50"}} style={{width: 50, height: 50}} />
            <Text>Online</Text>

            <Image source={{ uri: "https://via.placeholder.com/40x50"}} style={{width: 50, height: 50}} />
            <Image source={{ uri: "https://via.placeholder.com/40x50"}} style={{width: 50, height: 50}} />

            <Text>Directions</Text>
            <Text>Miles</Text>
         </View>

       </View>
    );
  }
}

Here是一个演示您想要做的事。

FlatList中的样式

1 个答案: