Question

我想在react native中创建一个自定义卡，这使我对使用视图感到困惑。

我已尝试按照本教程制作卡片，但由于它非常令人困惑，我一无所获。下图是我要实现的目标。

这就是我所拥有的

ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"]

这是我期望得到的

this is what I expect

Answer 1

希望这对您有帮助

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

const Card = ({ title, desc }) => (
  <View style={styles.cardContainer}>
    <View style={styles.cardContent}>
      <View style={{ flexDirection: 'column' }}>
          <Text>{title}</Text>
          <Text>{desc}</Text>
      </View>
      <MaterialIcons name="navigate-next" size={40} color="red" />
    </View>
  </View>
)

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.cards = [
      {
        title: 'Top up',
        desc: 'Top up any number'
      },
      {
        title: 'Top up history',
        desc: 'View all of the top up you have made'
      }
    ]
  }

  renderCards = () => {
    return this.cards.map(card => (
      <Card
        title={card.title}
        desc={card.desc}
      />
    ))
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderCards()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 25,
  },
  cardContainer: {
    paddingTop: 30,
    paddingBottom: 30,
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowOffset: { x: 0, y: 10 },
    shadowOpacity: 1,
    borderLeftColor: 'blue',
    borderLeftWidth: 10,
    alignSelf: 'stretch',
    backgroundColor: 'white',
    marginTop: 20,
  },
  cardContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginLeft: 20,
  }
});

https://snack.expo.io/@xavier96/aGVscC

如何在React Native中创建复杂的视图和卡片

1 个答案: