react-native 在卡片右侧添加“...”以显示更多信息答案

【问题标题】：react-native add '...' on the right of card to show more informationreact-native 在卡片右侧添加“...”以显示更多信息
【发布时间】：2018-03-06 05:59:55
【问题描述】：

我正在尝试在卡片右侧添加 3 个小点以显示有关点击的更多信息，但找不到如何调用它。

在android上它被称为“溢出菜单”，但我发现唯一使用overflow的组件是“toolbarAndroid”。我不能使用它，因为我在Android和IOS上工作。

你知道怎么做吗？实际上我正在为卡使用“react-native-elements”，但他们不提供此选项。也许我必须为此创建一个组件

我的实际代码，不使用卡片的“标题”道具，因为我不想显示分隔线。

  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>
    );
  }

【问题讨论】：

我认为您可以通过适当的设计添加透明图像
到哪个组件？ react-native-element 卡片的标题上没有图标
您还没有添加代码，所以不确定，但在您的卡片标题/第一行呈现的那一行
在此行之后添加图片：<Text style={thisstyles.projectName}>{name}</Text>
是的，我的错。卡片组件的“标题”道具只需要一个字符串。我将为此创建一个自定义组件

标签： react-native

【解决方案1】：

由于您使用了自定义组件，只需添加 Image 以显示三点。

<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

【讨论】：

图片将无法点击，因此不能用于此类操作。我正在使用标题和回调道具创建我的自定义组件
你需要在图片上添加TouchableOpacity

【解决方案2】：

你可以像这样在没有任何图像的情况下创建你的组件

    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;

【讨论】：