react-native - 如何在 react native 中创建复杂的视图和卡片

Question

我想在本机反应中创建一个自定义卡，这让我对使用视图感到困惑。

我试图按照教程制作一张卡片，但由于它非常令人困惑，所以我没有得到任何结果。下图是我想要实现的。

这就是我所拥有的

试图制作卡片

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Platform } from "react-native";

export default class App extends React.Component {
  render() {
return (
  <View style={styles.container}>
    <View style={styles.squareShapeView}/>
    <View style={{flex:0.7}}>
      <Text>Test1</Text>
       <Text>Test1</Text>
    </View> 
  </View>
  );
 }
}

 const styles = StyleSheet.create({
 container: {
  marginTop:50,
  justifyContent: 'center',
  alignItems:'center',
  flexDirection:'row',
  borderWidth:0.3,
  marginLeft:30,
   marginRight:30
  },

   squareShapeView: {
//To make Square Shape
  width:20,
  height:70,
  backgroundColor: '#14ff5f',
  alignSelf:'flex-start'
   },


  });

这是我期望得到的

这就是我所期望的

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