react-native在卡的右側添加'...'以顯示更多信息

我正在嘗試在卡的右側添加3個小點以顯示有關點擊的更多信息，但找不到如何調用。react-native在卡的右側添加'...'以顯示更多信息

在Android上它被稱爲「」溢出菜單」，但使用overflow我發現的唯一部件是‘toolbarAndroid’。因爲我在Android &工作IOS。

你知道如何做到這一點，我不能用它？其實我使用「反應本土元素」爲證，但他們不提供這個選項。也許我要創建爲

我的實際代碼的組成部分，不使用「標題」道具的因爲我不想顯示分隔線。

renderProject(project) { 
    const { id, name, description, species, images } = project; 
    return (
     <Card containerStyle={thisstyles.cardContainerStyle} key={id}> 
     <View> 
      <Text style={thisstyles.projectName}>{name}</Text> 
     </View> 
     <View style={{marginLeft:15}}> 
      <Text style={{color:'mediumvioletred'}}>{description}</Text> 
      <Text> 
      {species} Espèces {images} Images 
      </Text> 
     </View> 
     </Card> 
    ); 
    }

來源

2017-09-25 AlainIb

我認爲你可以適當的設計 –

到組件添加透明圖像？ react-native-element卡在標題上沒有圖標 – AlainIb

您還沒有添加代碼，所以不確定，但在您的卡片標題/第一行被渲染的行上 –

正如您使用自定義組件只需添加圖像顯示三重點。

<View> 
    <Text style={thisstyles.projectName}>{name}</Text> 
    <Image style={position: 'absolute', right: 0} 
     source={require('../../path/to/image')} /> 
</View>

在你給定的模塊react-native-elements，

<Card 
    title='HELLO WORLD' 
    image={require('../images/pic2.jpg')}> // you can play around with this

來源

2017-09-25 10:10:12

圖片不會被點擊，所以不能用於這樣的動作。我正在使用標題和回調道具創建自定義組件 – AlainIb

您需要在圖片上添加「TouchableOpacity」 –

您可以木箱你的分量像這樣沒有任何圖像

import React, {Component} from 'react'; 
import {View,TouchableOpacity} from 'react-native'; 
import {Text,Header,CardItem} from 'native-base'; 

class CardExample extends Component{ 

    _renderSearchResult(){ 
    return(
     <View> 
     <CardItem style={styles.cardView}> 
      <View style={{flex:1}}> 
      <View style={styles.locationRowContainer}> 
       <View style={styles.addressContainer}> 
       <Text style={styles.locationText}> 
        My current location 
       </Text> 
       </View> 
       <TouchableOpacity onPress={()=>{alert('You cliked me')}}> 
       <View> 
       <View style={styles.circleDot}> 
       </View> 
       <View style={styles.circleDot}> 
       </View> 
       <View style={styles.circleDot}> 
       </View> 
       </View> 
       </TouchableOpacity> 
      </View> 

      </View> 
     </CardItem> 

     <CardItem style={styles.cardView}> 
      <View style={{flex:1}}> 
      <View style={styles.locationRowContainer}> 
       <View style={styles.addressContainer}> 
       <Text style={styles.locationText}> 
        My current location 
       </Text> 
       </View> 
       <TouchableOpacity onPress={()=>{alert('You cliked me')}}> 
       <View> 
       <View style={styles.circleDot}> 
       </View> 
       <View style={styles.circleDot}> 
       </View> 
       <View style={styles.circleDot}> 
       </View> 
       </View> 
       </TouchableOpacity> 
      </View> 

      </View> 
     </CardItem> 
     </View> 
    ) 
    } 
    render(){ 
    return(
     <View style={styles.container}> 

     {this._renderSearchResult()} 
     </View> 
    ) 
    } 
} 
const styles={ 
    container:{ 
    flex:1, 
    }, 
    cardView:{ 
    elevation:5, 
    marginTop:8, 
    }, 
    locationRowContainer:{ 
    flexDirection:'row', 
    marginTop:21, 

    }, 
    addressContainer:{ 
    flex:3, 
    justifyContent:'center', 
    alignItems:'flex-start' 
    }, 
    locationText:{ 

    fontSize:16, 
    color:'black' 
    }, 
    circleDot:{ 
    backgroundColor:'black', 
    height:6, 
    width:6, 
    borderRadius:6/2, 
    marginBottom:2, 
    }, 
    mapLocationContainer:{ 
    flex:1, 
    justifyContent:'center', 
    alignItems:'flex-end' 
    } 
} 
export default CardExample;

來源

2017-09-25 10:23:02

react-native在卡的右側添加'...'以顯示更多信息

回答

相關問題