[React Native]看著文件跌跌撞撞-Using List Views

VS Code加上此Setting就不會有煩人的貼上自動排格式了

"editor.formatOnPaste": false,

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Alert, ScrollView, Image , FlatList } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list : [
        { name : 'John',age: 30 },
        { name : 'Jack',age: 20 },
        { name : 'Mary',age: 25 },
      ]
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
            data={this.state.list} 
            keyExtractor={(item, index) => index.toString()}
            renderItem={
              ({item}) => <Text style={styles.li}> { item.name } </Text> 
            }></FlatList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 25,
  },
  li: {
    backgroundColor: '#f00',
    padding: 10,
    marginBottom: 10,
  }
});

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Alert, ScrollView, Image , FlatList , SectionList } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list : [
        { 
          team : 'teamA' ,
          data : [
            { name : 'John',age: 30 },
            { name : 'Jack',age: 20 },
            { name : 'Mary',age: 25 },
          ]
        },{
          team : 'teamB' ,
          data : [
            { name : 'Jerry',age: 26 },
          ]
        }
      ]
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <SectionList 
            sections={this.state.list} 
            keyExtractor={(item, index) => index.toString()}
            renderSectionHeader={
              ({section}) => <Text style={styles.liTitle}> { section.team } </Text> 
            }
            renderItem={
              ({item}) => <Text style={styles.li}> { item.name } </Text> 
            }
        ></SectionList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 25,
  },
  liTitle: {
    backgroundColor: '#000',
    color : '#fff'
  },
  li: {
    backgroundColor: '#f00',
    padding: 10,
    marginBottom: 2,
  }
});