Question

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

在Android上它被称为“溢出菜单”，但是我找到的唯一使用overflow的组件是“toolbarAndroid”。我无法使用它，因为我在Android＆amp; 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>
    );
  }

Answer 1

如您使用自定义组件，只需添加图像即可显示三点。

<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

Answer 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;

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

2 个答案: