android studio run ionic on android phone

settings => about phone => tap build number 7 times => system => developer options

enable usb debug

cmd => cd ionic project => npx cap open android

android studio opens => tools => sdk manager

check device android versions

sdk tools => check google driver => apply

close sdk manager => select device => run

ionic app installed on smart phone

app runs on smart phone

reference:
http://chuanshuoge2.blogspot.com/2020/04/ionic-react-android-studio.html
https://chuanshuoge2.blogspot.com/2020/04/capacitor-new-way-to-build-native.html



white screen after splash
https://forum.ionicframework.com/t/after-splash-screen-display-white-screen-long-time/80162/46

Yes, I could observe this white splash screen behavior on low-mid android smartphones, a little bit older tablets regardless of what the app developers intended. Some apps will be stuck at white splash screen on start and will not progress to home page at all.

I carry eight android testing devices including two tablets, one 12 inch android book, five smartphones of all kinds. This problem is a legitimate & observable problem of Cordova. This thread has been visited 18,000 times since it started in early 2017. That tells everything.

Thankfully, Ionic team is now working on developing their own native layer which will replace Cordova. I hope this problem gets solved soon.

ionic react android studio run on simulator

//cmd

//create ionic app
ionic start ionicApp

framework: react
start template: tabs
android support: yes

//build ionic app
ionic build -prod

//convert ionic react to java and open in android studio
npx cap add android
npx cap sync
npx cap open android

in android studio, click open avd manager to add virtual device

added pixel 2 as virtual device, click run

virtual device opens, wait for app to install. app runs

reference:
connect smartphone with android studio
https://javatutorial.net/connect-android-device-android-studio

ionic capacitor open android studio
https://capacitor.ionicframework.com/docs/android#next-steps

gradle module not support error
https://github.com/ionic-team/capacitor/issues/349

ionic react toolbar

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal, IonRefresher, IonRefresherContent,
  IonTextarea, IonSelect, IonListHeader,
  IonSelectOption, IonButtons, IonBackButton,
  IonMenuButton, IonSegment, IonSearchbar,
  IonSegmentButton,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import {
  personCircle, search, ellipsisHorizontal,
  ellipsisVertical, helpCircle, star, create
} from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'

const Tab1: React.FC = () => {

  return (
    <IonPage>
      <IonContent>
        <IonToolbar>
          <IonTitle>Toolbar Example</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>Back Button</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonTitle size="small">Small Title above a Default Title</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Default Title</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="secondary">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Default Buttons</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton fill="solid">
              <IonIcon slot="start" icon={personCircle} />
        Contact
      </IonButton>
          </IonButtons>
          <IonTitle>Solid Buttons</IonTitle>
          <IonButtons slot="primary">
            <IonButton fill="solid" color="secondary">
              Help
        <IonIcon slot="end" icon={helpCircle} />
            </IonButton>
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton fill="outline">
              <IonIcon slot="start" icon={star} />
        Star
      </IonButton>
          </IonButtons>
          <IonTitle>Outline Buttons</IonTitle>
          <IonButtons slot="primary">
            <IonButton color="danger" fill="outline">
              Edit
        <IonIcon slot="end" icon={create} />
            </IonButton>
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton>Account</IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="danger">Edit</IonButton>
          </IonButtons>
          <IonTitle>Text Only Buttons</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton autoHide={false} />
          </IonButtons>
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={star} />
            </IonButton>
          </IonButtons>
          <IonTitle>Left side menu toggle</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="primary">
            <IonButton onClick={() => { }}>
              <IonIcon slot="icon-only" icon={star} />
            </IonButton>
          </IonButtons>
          <IonTitle>Right side menu toggle</IonTitle>
          <IonButtons slot="end">
            <IonMenuButton autoHide={false} />
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="primary">
            <IonButton onClick={() => { }}>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonSearchbar placeholder="Search Favorites" />
        </IonToolbar>

        <IonToolbar>
          <IonSegment>
            <IonSegmentButton value="all">
              All
      </IonSegmentButton>
            <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
          </IonSegment>
        </IonToolbar>

        <IonToolbar color="secondary">
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="primary">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Secondary Toolbar</IonTitle>
        </IonToolbar>

        <IonToolbar color="dark">
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="danger">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Dark Toolbar</IonTitle>
        </IonToolbar>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

ionic react toggle

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner, IonRadioGroup, IonRadio,
  IonRange, IonSearchbar, IonFooter, IonSegmentButton,
  IonSegment, IonToast, IonToggle
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  call, home, heart, pin, star,
  globe, basket, camera, bookmark
} from 'ionicons/icons';

const Tab3: React.FC = () => {
  const [checked, setChecked] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Toggle Example</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>

          <IonItemDivider>Default Toggle</IonItemDivider>
          <IonItem>
            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
            <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
          </IonItem>

          <IonItemDivider>Disabled Toggle</IonItemDivider>
          <IonItem><IonToggle disabled /></IonItem>

          <IonItemDivider>Checked Toggle</IonItemDivider>
          <IonItem><IonToggle checked /></IonItem>

          <IonItemDivider>Toggle Colors</IonItemDivider>
          <IonItem><IonToggle color="primary" /></IonItem>
          <IonItem><IonToggle color="secondary" /></IonItem>
          <IonItem><IonToggle color="danger" /></IonItem>
          <IonItem><IonToggle color="light" /></IonItem>
          <IonItem><IonToggle color="dark" /></IonItem>

          <IonItemDivider>Toggles in a List</IonItemDivider>
          <IonItem>
            <IonLabel>Pepperoni</IonLabel>
            <IonToggle value="pepperoni" />
          </IonItem>

          <IonItem>
            <IonLabel>Sausage</IonLabel>
            <IonToggle value="sausage" disabled={true} />
          </IonItem>

          <IonItem>
            <IonLabel>Mushrooms</IonLabel>
            <IonToggle value="mushrooms" />
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

ionic react toast

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner, IonRadioGroup, IonRadio,
  IonRange, IonSearchbar, IonFooter, IonSegmentButton,
  IonSegment, IonToast
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  call, home, heart, pin, star,
  globe, basket, camera, bookmark
} from 'ionicons/icons';

const Tab3: React.FC = () => {
  const [showToast1, setShowToast1] = useState(false);
  const [showToast2, setShowToast2] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Toast Example</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
        <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
        <IonToast
          isOpen={showToast1}
          onDidDismiss={() => setShowToast1(false)}
          message="Your settings have been saved."
          duration={200}
        />

        <IonToast
          isOpen={showToast2}
          onDidDismiss={() => setShowToast2(false)}
          message="Click to Close"
          position="middle"
          buttons={[
            {
              side: 'start',
              icon: 'star',
              text: 'Favorite',
              handler: () => {
                console.log('Favorite clicked');
              }
            },
            {
              text: 'Done',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked');
              }
            }
          ]}
        />
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

ionic react tabs

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
  IonReorder, IonReorderGroup, IonSlide, IonSlides,
  IonTabBar, IonTabs, IonTabButton, IonBadge,
  IonRouterOutlet
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  calendar, personCircle, map,
  informationCircle
} from 'ionicons/icons';

const Tab2: React.FC = () => {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tabs Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonTabs>
          <IonRouterOutlet></IonRouterOutlet>
          <IonTabBar slot="top">
            <IonTabButton tab="schedule">
              <IonIcon icon={calendar} />
              <IonLabel>Schedule</IonLabel>
              <IonBadge>6</IonBadge>
            </IonTabButton>

            <IonTabButton tab="speakers">
              <IonIcon icon={personCircle} />
              <IonLabel>Speakers</IonLabel>
            </IonTabButton>

            <IonTabButton tab="map">
              <IonIcon icon={map} />
              <IonLabel>Map</IonLabel>
            </IonTabButton>

            <IonTabButton tab="about">
              <IonIcon icon={informationCircle} />
              <IonLabel>About</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

What’s Like To Live On a $600 Per Month BOAT in Los Angeles

Capacitor: A new way to build native mobile apps with Ionic

ionic react slide

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
  IonReorder, IonReorderGroup, IonSlide, IonSlides
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle,
  call, pizza
} from 'ionicons/icons';
import { ItemReorderEventDetail } from '@ionic/core';

const slideOpts = {
  initialSlide: 1,
  speed: 400
};

const Tab2: React.FC = () => {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Slide Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonSlides pager={true} options={slideOpts}>
          <IonSlide>
            <div style={{ height: 400 }}>
              <h1>Slide 1</h1>
              <p>line 1</p>
              <p>line 2</p>
              <p>line 3</p>
              <p>line 4</p>
            </div>
          </IonSlide>
          <IonSlide>
            <div style={{ height: 400 }}>
              <h1>Slide 2</h1>
              <p>line 1</p>
              <p>line 2</p>
              <p>line 3</p>
              <p>line 4</p>
            </div>
          </IonSlide>
          <IonSlide>
            <div style={{ height: 400 }}>
              <h1>Slide 3</h1>
              <p>line 1</p>
              <p>line 2</p>
              <p>line 3</p>
              <p>line 4</p>
            </div>
          </IonSlide>

        </IonSlides>
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

ionic react select 3

alert

popover

action sheet

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonBadge, IonList,

  IonItemDivider, IonCheckbox, IonChip, IonAvatar,

  IonGrid, IonRow, IonCol, IonInput, IonToggle,

  IonModal, IonRefresher, IonRefresherContent,

  IonTextarea, IonSelect, IonListHeader,

  IonSelectOption

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab1.css';

import { pin, heart, closeCircle, close } from 'ionicons/icons';

import { RefresherEventDetail } from '@ionic/core';

import axios from 'axios'

const customAlertOptions = {

  header: 'Pizza Toppings',

  subHeader: 'Select your toppings',

  message: '$1.00 per topping',

  translucent: true

};

const customPopoverOptions = {

  header: 'Hair Color',

  subHeader: 'Select your hair color',

  message: 'Only select your dominant hair color'

};

const customActionSheetOptions = {

  header: 'Colors',

  subHeader: 'Select your favorite color'

};

const Tab1: React.FC = () => {

  const [toppings, setToppings] = useState<string[]>([]);

  const [hairColor, setHairColor] = useState<string>('brown');

  const [color, setColor] = useState<string>();

  return (

    <IonPage>

      <IonContent>

        <IonList>

          <IonListHeader>

            <IonLabel>

              Select with Interface Options

            </IonLabel>

          </IonListHeader>

          <IonItem>

            <IonLabel>Alert</IonLabel>

            <IonSelect

              interfaceOptions={customAlertOptions}

              interface="alert"

              multiple={true}

              placeholder="Select One"

              onIonChange={e => setToppings(e.detail.value)}

              value={toppings}

            >

              <IonSelectOption value="bacon">Bacon</IonSelectOption>

              <IonSelectOption value="olives">Black Olives</IonSelectOption>

              <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>

              <IonSelectOption value="peppers">Green Peppers</IonSelectOption>

              <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>

              <IonSelectOption value="onions">Onions</IonSelectOption>

              <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>

              <IonSelectOption value="pineapple">Pineapple</IonSelectOption>

              <IonSelectOption value="sausage">Sausage</IonSelectOption>

              <IonSelectOption value="Spinach">Spinach</IonSelectOption>

            </IonSelect>

          </IonItem>

          <IonItem>

            <IonLabel>Popover</IonLabel>

            <IonSelect

              interfaceOptions={customPopoverOptions}

              interface="popover"

              placeholder="Select One"

              onIonChange={e => setHairColor(e.detail.value)}

              value={hairColor}>

              <IonSelectOption value="brown">Brown</IonSelectOption>

              <IonSelectOption value="blonde">Blonde</IonSelectOption>

              <IonSelectOption value="black">Black</IonSelectOption>

              <IonSelectOption value="red">Red</IonSelectOption>

            </IonSelect>

          </IonItem>

          <IonItem>

            <IonLabel>Action Sheet</IonLabel>

            <IonSelect

              interfaceOptions={customActionSheetOptions}

              interface="action-sheet"

              placeholder="Select One"

              onIonChange={e => setColor(e.detail.value)}

              value={color}

            >

              <IonSelectOption value="red">Red</IonSelectOption>

              <IonSelectOption value="purple">Purple</IonSelectOption>

              <IonSelectOption value="yellow">Yellow</IonSelectOption>

              <IonSelectOption value="orange">Orange</IonSelectOption>

              <IonSelectOption value="green">Green</IonSelectOption>

            </IonSelect>

          </IonItem>

          <IonItemDivider>Your Selections</IonItemDivider>

          <IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>

          <IonItem>Hair Color: {hairColor}</IonItem>

          <IonItem>Color: {color ?? '(none selected)'}</IonItem>

        </IonList>

      </IonContent>

    </IonPage>

  );

};

export default Tab1;

揭开硅谷的另一面

硅谷是美国的高科技重镇，诞生了许多世界知名的公司，苹果、谷歌、Facebook、特斯拉、英特尔、思科、惠普、甲骨文…... 工作机会多，收入高，硅谷成为许多工程师心中的圣地麦加，吸引了来自全世界各地的人才。但是在加州灿烂的阳光下，硅谷也有不为人知的另外一面。 硅谷的高收入 根据硅谷指数（Silicon Valley Index），2018年硅谷有30%家庭的年收入超过20万美元。硅谷地区的人均收入（Per Capita Personal Income）在2018年达到11.3万美元，是加州人均收入6.4万美元的 1.8倍，是全美人均收入5.4万美元的2.1倍。 下图中绿色的曲线是1998年～2018年十年间的硅谷人均收入的走势；黄色的曲线是加州的人均收入走势，最下方蓝色的曲线是美国人均工资的走势。 1998年～2018年硅谷、加州和全美国人均收入的对比，图片来源：硅谷指数 （Silicon Valley Index） 2018年，硅谷地区的家庭收入中位数（Median Household Income）约为12.6万美元，是加州家庭收入中位数 7.5万美元的1.7倍，是全美家庭收入中位数6.2万美元的2倍。 2001年～2018年硅谷、加州和全美家庭收入中位数的对比，图片来源：硅谷指数（Silicon Valley Index） 硅谷的人才竞争激烈，催生出了一个20万美元年薪的公司俱乐部（$200K club），这些公司的员工年薪中位数（Median）超过20万美元。这里的年薪是指年度总薪酬，包括基本工资、奖金和股票。 根据 2018年的各家上市公司的财报，硅谷20万美元年薪俱乐部的成员包括：  谷歌，约25万美元（$246,804）  Facebook，约23万美元（$228,651）  Netflix，约20万美元（$202,335）  NetApp，约20万美元（$198,620） 统计意义上的平均工资并不能准确反映出一个公司的薪酬水平，有些公司高管的工资极高，硅谷大公司比如苹果、谷歌和Facebook等一些高管的年度薪酬都超过 2000万美元，如果只做简单的算术平均，会拉高平均工资。 而薪酬的中位数（Median）则较为准确地反映出薪酬水平，在一家20万美元年薪俱乐部的公司中，如果把公司的全体员工按照工资从高到低排成一条长队，中间那个人的年薪就是 20万美元，换句话说，这家公司至少有一半员工的年薪超过20万美元。 硅谷的高房价 美国梦的标志之一是拥有自己的房产，硅谷人均收入虽然高，但是许多人买不起房子。为什么？因为这里是全美国平均房价最高的地方之一。 根据 Compass 的数据，2018年旧金山独栋房屋的房价中位数是160万美元，全美房屋的房价中位数是26万美元，加州房屋的房价中位数是56.5万美元。 旧金山、加州和全美国房价中位数的对比图，图片来源：COMPASS 硅谷地区的房价中位数大约是100万美元，是全美国房价中位数的四倍。在房价这件事上，硅谷在美国相当于北京、上海、广州、深圳在中国。 2018年，美国的住房拥有率 （homeownership rate）是64.2%，而硅谷的核心地区 Santa Clara County 的住房拥有率只有51.4%，全美倒数几名，硅谷几乎有一半的人没有自己的住房。 一位硅谷知名计算机科学家和畅销书作家曾经在一次闭门演讲中说，在硅谷你必须优秀，否则你可能买不起住房。 天天有融资，日日有裁员 硅新社经常发布《美国融资快讯》，似乎硅谷每天都有创业公司融到钱，但是裁员也是家常便饭。“人在江湖飘，哪能不挨刀”。 最近美国的新冠病毒疫情，重创了硅谷的创业公司，一些颇具知名度的独角兽公司也撑不住了，纷纷宣布大规模裁员： 4/21/2020，互联网金融科技公司 LendingClub 裁员 460人； 4/21/2020，家居设计网站 Houzz 裁员 155人； 4/15/2020，运动相机公司 GoPro 裁员200人； 4/15/2020，机器人披萨公司 Zume 裁员 200人； 4/15/2020，期权管理软件公司 Carta 裁员 161人； 4/14/2020，访客管理软件公司 Envoy 裁员 58人； 4/13/2020，自动驾驶汽车技术公司 Zoox 裁员 100人； 4/9/2020，  美国“大众点评”网站 Yelp 裁员 1000人； 4/8/2020，  招聘管理系统软件公司 Lever 裁员 86 人； 硅谷人口增加缓慢之谜 根据2020年的硅谷指数，硅谷地区的人口大约310万人，其中38%是出生地在美国以外的移民。虽然人口在增加，但是增长的速度却非常缓慢，这不免让人有些奇怪：既然每年都有来自全美和世界各地的人来硅谷工作和生活，为什么人口增加得这么慢呢？ 硅谷指数 2020 揭晓了这个问题的答案：因为每年都有很多人离开硅谷，搬去美国其他的地方。 下图中，横坐标上方的红色柱状图表示每年流入硅谷的海外移民人数，横坐标下方的橙色柱状图是每年流出到美国其他城市的人数，绿色曲线是净流入/流出数据。           1998年～2019年硅谷人口流入和流出数据，图片来源：硅谷指数（Silicon Valley Index） 2020 硅谷指数估计，每年硅谷的人口流动率（Turnover Rate）大约是 5%。打一个比喻，如果把硅谷看成是一个公司，每年的离职率大约是 5%。 这些人离开硅谷以后去哪里了？2018年领英（LinkedIn）的一项调查显示，去西雅图、波特兰和丹佛这三个城市的比较多。可以理解的是，西雅图有微软和亚马逊等领先科技公司，而且所在的华盛顿州没有个人收入税，而加州的个人收入税则比较高。 硅谷的就业压力很大，几家欢乐几家愁。硅谷是工程师的天堂，但是文科生找工作却比较困难。 有的人幸运地进入了 20万美元年薪俱乐部，而另一些可能失业后找不到工作，无法忍受高房价造成的生活成本，选择低调离开。 硅谷的科技创新变化很快，曾经一度如日中天的半导体行业发展缓慢，现在最火的是人工智能、机器学习和软件。 硅谷的高工资也给公司造成了巨大的人力成本压力，增加了创业的成本，一些中小型的公司也选择了离开，搬到成本较低的德克萨斯州或者加州南部的洛杉矶和圣地亚哥。 硅谷的工作压力，也让一些职场女性推迟了生育的时间，硅谷的自然生育率也在下降。2008 年硅谷女性首次生育的平均年龄是 28岁，2018年是30岁；2008年，硅谷女性平均生育孩子的数量是1.9个，2018年是1.8个，低于低于加州和全美国的平均数2.1个。 2008 和 2018年硅谷女性生育数据对比，图片来源：硅谷指数（Silicon Valley Index）        1980年～2019年，硅谷和加州每年的出生人数，图片来源：硅谷指数（Silicon Valley Index） 孩子生下来后要培养，新的压力又出现了，许多来自中国和印度的家长都有一个共同的梦想：把自己的孩子送入常春藤名校，有人称之为“爬藤”，这些望子成龙的父母被称为“推爸”和“推妈”。 每年大学录取季，张三家的儿子去了斯坦福大学，李四家的女儿去了哈佛大学，让其他孩子的父母压力颇大。 硅谷的虎爸和虎妈不少，有的是毕业于清华北大等名校，有的是获得过国际奥林匹克数学物理竞赛的金牌的学霸，学习基因强大，对孩子的管理也比较严格，钢琴课、美术课、游泳课、数学课一个也不能少，决不能让孩子输在起跑线上。 有一个朋友说孩子在硅谷的压力太大，决定搬家到西雅图。我心中暗笑，那边有微软和亚马逊，也不缺少虎爸和虎妈。 有的人喜欢硅谷，说这里充满活力，是一个可以做梦的地方；有的人讨厌硅谷，说这里太虚夸浮躁，铜臭气息太重。 九十年代，有一部风靡中国的电视连续剧《北京人在纽约》，片头有一句话——“如果你爱一个人，就送他去纽约，因为那里是天堂；如果你恨一个人，那就送他去纽约，因为那里是地狱”。我觉得这句话形容硅谷也挺合适的。

ionic react select 2

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal, IonRefresher, IonRefresherContent,
  IonTextarea, IonSelect, IonListHeader,
  IonSelectOption
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'

const Tab1: React.FC = () => {
  const [toppings, setToppings] = useState<string[]>([]);
  const [pets, setPets] = useState<string[]>(['bird', 'dog']);

  return (
    <IonPage>
      <IonContent>
        <IonList>
          <IonListHeader>
            <IonLabel>
              Multiple Selection
        </IonLabel>
          </IonListHeader>

          <IonItem>
            <IonLabel>Toppings</IonLabel>
            <IonSelect value={toppings} multiple={true} cancelText="Nah" okText="Okay!" onIonChange={e => setToppings(e.detail.value)}>
              <IonSelectOption value="bacon">Bacon</IonSelectOption>
              <IonSelectOption value="olives">Black Olives</IonSelectOption>
              <IonSelectOption value="xcheese">Extra Cheese</IonSelectOption>
              <IonSelectOption value="peppers">Green Peppers</IonSelectOption>
              <IonSelectOption value="mushrooms">Mushrooms</IonSelectOption>
              <IonSelectOption value="onions">Onions</IonSelectOption>
              <IonSelectOption value="pepperoni">Pepperoni</IonSelectOption>
              <IonSelectOption value="pineapple">Pineapple</IonSelectOption>
              <IonSelectOption value="sausage">Sausage</IonSelectOption>
              <IonSelectOption value="Spinach">Spinach</IonSelectOption>
            </IonSelect>
          </IonItem>

          <IonItem>
            <IonLabel>Pets</IonLabel>
            <IonSelect multiple={true} value={pets} onIonChange={e => { setPets(e.detail.value); console.log(e.detail.value) }}>
              <IonSelectOption value="bird">Bird</IonSelectOption>
              <IonSelectOption value="cat">Cat</IonSelectOption>
              <IonSelectOption value="dog">Dog</IonSelectOption>
              <IonSelectOption value="honeybadger">Honey Badger</IonSelectOption>
            </IonSelect>
          </IonItem>
          <IonItemDivider>Your Selections</IonItemDivider>
          {/*sum up all elements in an array*/}
          <IonItem>Toppings: {toppings.length ? toppings.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
          <IonItem>Pets: {pets.length ? pets.reduce((curr, prev) => prev + ', ' + curr, '') : '(none selected)'}</IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

reference:
https://dev.to/yogesnsamy/how-to-use-the-reduce-method-in-javascript-and-react-5dhl

ionic react select 1

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal, IonRefresher, IonRefresherContent,
  IonTextarea, IonSelect, IonListHeader,
  IonSelectOption
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'

const Tab1: React.FC = () => {
  const [gender, setGender] = useState<string>();
  const [hairColor, setHairColor] = useState<string>('brown');

  return (
    <IonPage>
      <IonContent>
        <IonList>
          <IonListHeader>
            <IonLabel>
              Single Selection
            </IonLabel>
          </IonListHeader>

          <IonItem>
            <IonLabel>Gender</IonLabel>
            <IonSelect value={gender} placeholder="Select One" onIonChange={e => setGender(e.detail.value)}>
              <IonSelectOption value="female">Female</IonSelectOption>
              <IonSelectOption value="male">Male</IonSelectOption>
            </IonSelect>
          </IonItem>

          <IonItem>
            <IonLabel>Hair Color</IonLabel>
            <IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
              <IonSelectOption value="brown">Brown</IonSelectOption>
              <IonSelectOption value="blonde">Blonde</IonSelectOption>
              <IonSelectOption value="black">Black</IonSelectOption>
              <IonSelectOption value="red">Red</IonSelectOption>
            </IonSelect>
          </IonItem>
          <IonItemDivider>Your Selections</IonItemDivider>
          <IonItem>Gender: {gender ?? '(none selected)'}</IonItem>
          <IonItem>Hair Color: {hairColor}</IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

crabester, gatorbites

Where did the airlines park their airplanes? // WOW!!!

ionic react segment

Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner, IonRadioGroup, IonRadio,
  IonRange, IonSearchbar, IonFooter, IonSegmentButton,
  IonSegment
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  call, home, heart, pin, star,
  globe, basket, camera, bookmark
} from 'ionicons/icons';

const Tab3: React.FC = () => {
  const [searchText, setSearchText] = useState('');

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>SegmentExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default Segment --*/}
        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
          <IonSegmentButton value="friends">
            <IonLabel>Friends</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="enemies">
            <IonLabel>Enemies</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Disabled Segment --*/}
        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} disabled value="sunny">
          <IonSegmentButton value="sunny">
            <IonLabel>Sunny</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="rainy">
            <IonLabel>Rainy</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment with anchors --*/}
        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
          <IonSegmentButton value="dogs">
            <IonLabel>Dogs</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="cats">
            <IonLabel>Cats</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Scrollable Segment --*/}
        <IonSegment scrollable value="heart">
          <IonSegmentButton value="home">
            <IonIcon icon={home} />
          </IonSegmentButton>
          <IonSegmentButton value="heart">
            <IonIcon icon={heart} />
          </IonSegmentButton>
          <IonSegmentButton value="pin">
            <IonIcon icon={pin} />
          </IonSegmentButton>
          <IonSegmentButton value="star">
            <IonIcon icon={star} />
          </IonSegmentButton>
          <IonSegmentButton value="call">
            <IonIcon icon={call} />
          </IonSegmentButton>
          <IonSegmentButton value="globe">
            <IonIcon icon={globe} />
          </IonSegmentButton>
          <IonSegmentButton value="basket">
            <IonIcon icon={basket} />
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment with secondary color --*/}
        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} color="secondary">
          <IonSegmentButton value="standard">
            <IonLabel>Standard</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="hybrid">
            <IonLabel>Hybrid</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="sat">
            <IonLabel>Satellite</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment in a toolbar --*/}
        <IonToolbar>
          <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
            <IonSegmentButton value="camera">
              <IonIcon icon={camera} />
            </IonSegmentButton>
            <IonSegmentButton value="bookmark">
              <IonIcon icon={bookmark} />
            </IonSegmentButton>
          </IonSegment>
        </IonToolbar>

        {/*-- Segment with default selection --*/}
        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)} value="javascript">
          <IonSegmentButton value="python">
            <IonLabel>Python</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="javascript">
            <IonLabel>Javascript</IonLabel>
          </IonSegmentButton>
        </IonSegment>
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

ionic react reorder

drag and drop item 5

list is reordered

import React, { useState } from 'react';

import {

  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

  IonAlert, IonButton, IonCard, IonCardHeader,

  IonCardSubtitle, IonCardTitle, IonCardContent,

  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,

  IonList, IonItemDivider, IonTextarea, IonAvatar,

  IonText, IonThumbnail, IonSelectOption, IonInput,

  IonSelect, IonCheckbox, IonToggle, IonRange,

  IonNote, IonRadio, IonItemSliding, IonItemOption,

  IonItemOptions, IonListHeader, IonChip, IonImg,

  IonLoading, IonProgressBar, IonSkeletonText,

  IonReorder, IonReorderGroup,

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab2.css';

import {

  closeCircle, home, star, navigate,

  informationCircle, checkmarkCircle, shuffle,

  call, pizza

} from 'ionicons/icons';

import { ItemReorderEventDetail } from '@ionic/core';

const Tab2: React.FC = () => {

  function doReorder(event: CustomEvent<ItemReorderEventDetail>) {

    // The `from` and `to` properties contain the index of the item

    // when the drag started and ended, respectively

    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

    // Finish the reorder and position the item in the DOM based on

    // where the gesture ended. This method can also be called directly

    // by the reorder group

    event.detail.complete();

  }

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>Reorder Examples</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

        {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}

        <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>

          {/*-- Default reorder icon, end aligned items --*/}

          <IonItem>

            <IonLabel>Item 1</IonLabel>

            <IonReorder slot="end" />

          </IonItem>

          <IonItem>

            <IonLabel>Item 2</IonLabel>

            <IonReorder slot="end" />

          </IonItem>

          {/*-- Default reorder icon, start aligned items --*/}

          <IonItem>

            <IonReorder slot="start" />

            <IonLabel>Item 3</IonLabel>

          </IonItem>

          <IonItem>

            <IonReorder slot="start" />

            <IonLabel>Item 4</IonLabel>

          </IonItem>

          {/*-- Custom reorder icon end items --*/}

          <IonItem>

            <IonLabel>Item 5</IonLabel>

            <IonReorder slot="end">

              <IonIcon icon={pizza} />

            </IonReorder>

          </IonItem>

          <IonItem>

            <IonLabel>Item 6</IonLabel>

            <IonReorder slot="end">

              <IonIcon icon={pizza} />

            </IonReorder>

          </IonItem>

          {/*-- Items wrapped in a reorder, entire item can be dragged --*/}

          <IonReorder>

            <IonItem>

              <IonLabel>Item 7</IonLabel>

            </IonItem>

          </IonReorder>

          <IonReorder>

            <IonItem>

              <IonLabel>Item 8</IonLabel>

            </IonItem>

          </IonReorder>

        </IonReorderGroup>

      </IonContent>

    </IonPage >

  )

}

export default Tab2;