在Snack中使用卡片

有时，需要展示一个带有一些文本、图片或颜色的小有界面的区域，并在以后检索更多信息或在选择该项时执行一些操作。为此，可以使用来自react-native-paper的Card组件。可以在屏幕上使用一个以上的卡片，将其作为列表项并使其可点击。本文将展示React Native和JavaScript代码的两个不同示例，第一个示例在应用中使用了一个带有图片的单个卡片，第二个示例使用了多个带有图标的卡片，并且可以点击。

步骤-1

步骤1： 从’react-native’导入Text、View、StyleSheet和Button。还导入来自react-native-paper的Card组件。

步骤2： 创建App.js，并编写使用卡片的代码。使用<Card.Cover>设置所需的图片，使用<Card.Content>设置卡片内部的内容。

步骤3： 使用按钮和onPress()函数进一步指定操作，放置在标签内部。

步骤4： 使用StyleSheet实现卡片内容的格式化样式。

步骤5： 检查卡片输出。点击按钮并检查结果。

示例1：使用单个带有图片的卡片

项目中使用的重要文件：

App.js
Stars11.jpg是在此项目中使用的图片文件。

App.js： 这是该项目的主要JavaScript文件。

示例

import {Component} from 'react';
import {Text, View, StyleSheet, Button } from 'react-native';
import { Card } from 'react-native-paper';

export default class CardsExampleOne extends Component{
   constructor() {
      super();
      this.state = {
         myMsgNote: ''
      };
   }
   render() {
      return (
         <View style={styles.mainSpace}>

            <Text style={styles.textSty}>
               Greeting Card Example
            </Text>
            <Card>
               <Card.Content style={{padding: 6, margin:5, justifyContent:"center"}}>
                  <Text style={styles.textSty}>
                     {this.state.myMsgNote}
                  </Text>
                  <Card.Cover style={{width: 294, height: 126, paddingLeft:8}} source={require('./stars11.jpg')}>
                  </Card.Cover>
               </Card.Content>

               <Button onPress={()=>this.setState({ myMsgNote: "Happy Birthday To You!" })} title="Show Message" color="#088da5" />
               <Button onPress={()=>this.setState({ myMsgNote: "" })
               }
               title="Hide Message" color="#61bdac" />
            </Card>
         </View>
      );
   }
}
const styles = StyleSheet.create({
   mainSpace: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: '#cce0ff',
      padding: 8,
   },
   textSty: {
      margin: 24,
      fontSize: 18,
      fontWeight: 'bold',
      textAlign: 'center',
      padding: 6,
   },
});

输出

结果可以在线上看到。当用户输入代码时，默认选择Web视图，并且结果会立即显示出来。

在Snack中使用卡片

在Snack的Web视图中的卡片输出。

步骤-2

步骤1-从’react-native’导入Text、View和StyleSheet。还要从react-native-paper中导入Card和List。

步骤2-创建App.js并编写使用List的代码。使用-List.Icon >标签将图标与列表项集成。

步骤3-使用<List.Item>标签指定列表项的左右内容以及点击时执行的操作。在<List.Item>标记内使用<Card>标记。还要使用<Card.Content>设置卡片内的内容。

步骤4-在<List.Item>标记内指定onPress()函数以指定进一步的操作。

步骤5-使用StyleSheet实现卡片内容格式化样式。

步骤6-点击项目列表（卡片和图标的任意位置），并检查结果。

示例2：使用多个卡片作为列表项

项目中使用的重要文件是

App.js
App.js：这是该项目的主要JavaScript文件。

示例

import{Component}from'react';
import{Text,View,StyleSheet}from'react-native';
import{Card,List}from'react-native-paper';

exportdefaultclassCardsExampleOneextendsComponent{
   constructor(){
      super();
      this.state={
         myMsgNote:''
      };
   }

   render(){
      return(
         <Viewstyle={styles.mainSpace}>

            <Textstyle={styles.textSty}>
               TelephoneDirectory
            </Text>

            <List.Item
               onPress={()=>console.log('CallingHomeNow')}
               left={props=><List.Iconicon="phone"/>}
               right={props=><Cardstyle={styles.cardSty}>

            <Card.Contentstyle={{}}>
               <Textstyle={styles.textSty}>
                  Home
               </Text>
            </Card.Content>

            </Card>}
            />
            <List.Item
               onPress={()=>console.log('CallingSchoolNow')}
               left={props=><List.Iconicon="phone"/>}
               right={props=><Cardstyle={styles.cardSty}>
            <Card.Content>
               <Textstyle={styles.textSty}>
                  School
               </Text>
            </Card.Content>
            </Card>}
            />

            <List.Item
               onPress={()=>console.log('CallingOfficeNow')}
               left={props=><List.Iconicon="phone"/>}
               right={props=><Cardstyle={styles.cardSty}>
            <Card.Content>
               <Textstyle={styles.textSty}>
                  Office
               </Text>
            </Card.Content>
            </Card>}
            />
         </View>
      );
   }
}

conststyles=StyleSheet.create({
   mainSpace:{
      flex:1,
      justifyContent:'center',
      backgroundColor:'#cce0ff',
      padding:8,
   },
   textSty:{
      fontSize:18,
      fontWeight:'bold',
      textAlign:'center',
   },
   cardSty:{
      shadowColor:'black',
      elevation:4,
      width:"90%",
      backgroundColor:"#aaaa2d",
   }
});