react native flex 2

<View style={{ flex: 1, flexDirection: 'column', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column',  flexWrap: 'wrap', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'center', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'stretch', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'space-between', marginTop: 25 }}>

<View style={{ flex: 1, flexDirection: 'column', flexWrap: 'wrap', 

alignContent: 'space-around', marginTop: 25 }}>

import React, { Component, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import useInterval from 'react-useinterval';

function PoolBall(props) {
  return (
    <View style={{ ...styles.ball, backgroundColor: props.color }} >
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <View style={{ ...styles.number, backgroundColor: 'white' }}>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <Text>{props.label}</Text>
          </View>
        </View>
      </View>
    </View>
  )
}

function PoolBallStripe(props) {
  return (
    <View style={{ ...styles.ball, backgroundColor: 'lightgrey' }} >
      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
        <View style={{ ...styles.stripe, backgroundColor: props.color }}>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <View style={{ ...styles.number, backgroundColor: 'white' }}>
              <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                <Text>{props.label}</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default function FlexDirectionBasics() {

  return (
    <View style={{ flex: 1, flexDirection: 'column', marginTop: 25 }}>

      <PoolBall color='yellow' label={1} />


      <PoolBall color='blue' label={2} />
      <PoolBall color='red' label={3} />


      <PoolBall color='violet' label={4} />
      <PoolBall color='orange' label={5} />
      <PoolBall color='green' label={6} />


      <PoolBall color='brown' label={7} />
      <PoolBall color='black' label={8} />
      <PoolBallStripe color='yellow' label={9} />
      <PoolBallStripe color='blue' label={10} />


      <PoolBallStripe color='red' label={11} />
      <PoolBallStripe color='violet' label={12} />
      <PoolBallStripe color='orange' label={13} />
      <PoolBallStripe color='green' label={14} />
      <PoolBallStripe color='brown' label={15} />

    </View>
  );
}


const styles = StyleSheet.create({
  ball: {
    width: 50,
    height: 50,
    borderRadius: 25,
    flexDirection: 'column',
    justifyContent: 'center',
    marginVertical: 25
  },
  number: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  stripe: {
    width: 30,
    height: 50,
    borderRadius: 11,
    flexDirection: 'column',
    justifyContent: 'center'
  }
});

reference:
http://chuanshuoge2.blogspot.com/2019/10/react-native-flex.html

computer wakes up from sleep mode at night

reference:
https://lifehacker.com/how-to-find-out-what-woke-up-your-computer-last-1550549116
https://www.online-tech-tips.com/computer-tips/stop-mouse-from-waking-windows-up-from-sleep-mode/
https://www.howtogeek.com/122954/how-to-prevent-your-computer-from-waking-up-accidentally/

react native pool balls

justifyContent: 'center' 

function PoolBall(props) {

  return (

    <View style={{ ...styles.ball, backgroundColor: props.color }} >

      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

        <View style={{ ...styles.number, backgroundColor: 'white' }}>

          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

            <Text>{props.label}</Text>

          </View>

        </View>

      </View>

    </View>

  )

}

function PoolBallStripe(props) {

  return (

    <View style={{ ...styles.ball, backgroundColor: 'lightgrey' }} >

      <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

        <View style={{ ...styles.stripe, backgroundColor: props.color }}>

          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

            <View style={{ ...styles.number, backgroundColor: 'white' }}>

              <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

                <Text>{props.label}</Text>

              </View>

            </View>

          </View>

        </View>

      </View>

    </View>

  )

}

export default class FlexDirectionBasics extends Component {

  render() {

    return (

      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', marginTop: 25 }}>

        <View style={{ flexDirection: 'row', justifyContent: 'center', top: 13.4 }}>

          <PoolBall color='yellow' label={1} />

        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center', top: 6.7 }}>

          <PoolBall color='blue' label={2} />

          <PoolBall color='red' label={3} />

        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>

          <PoolBall color='violet' label={4} />

          <PoolBall color='orange' label={5} />

          <PoolBall color='green' label={6} />

        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center', top: -6.7 }}>

          <PoolBall color='brown' label={7} />

          <PoolBall color='black' label={8} />

          <PoolBallStripe color='yellow' label={9} />

          <PoolBallStripe color='blue' label={10} />

        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'center', top: -13.4 }}>

          <PoolBallStripe color='red' label={11} />

          <PoolBallStripe color='violet' label={12} />

          <PoolBallStripe color='orange' label={13} />

          <PoolBallStripe color='green' label={14} />

          <PoolBallStripe color='brown' label={15} />

        </View>

      </View>

    );

  }

};

const styles = StyleSheet.create({

  ball: {

    width: 50,

    height: 50,

    borderRadius: 25,

    flexDirection: 'column',

    justifyContent: 'center'

  },

  number: {

    width: 20,

    height: 20,

    borderRadius: 10,

  },

  stripe: {

    width: 30,

    height: 50,

    borderRadius: 11,

    flexDirection: 'column',

    justifyContent: 'center'

  }

});

justifyContent: 'space-between'

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between', marginTop: 25 }}>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <PoolBall color='yellow' label={1} />
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <PoolBall color='blue' label={2} />
          <PoolBall color='red' label={3} />
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <PoolBall color='violet' label={4} />
          <PoolBall color='orange' label={5} />
          <PoolBall color='green' label={6} />
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <PoolBall color='brown' label={7} />
          <PoolBall color='black' label={8} />
          <PoolBallStripe color='yellow' label={9} />
          <PoolBallStripe color='blue' label={10} />
        </View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <PoolBallStripe color='red' label={11} />
          <PoolBallStripe color='violet' label={12} />
          <PoolBallStripe color='orange' label={13} />
          <PoolBallStripe color='green' label={14} />
          <PoolBallStripe color='brown' label={15} />
        </View>
      </View>
    );
  }
};

justifyContent: 'space-around'

justifyContent: 'space-evenly'

reference:
http://chuanshuoge2.blogspot.com/2019/10/react-native-flex.html
https://en.wikipedia.org/wiki/Billiard_ball

react native flex

flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

column, column-reverse

row, row-reverse

export default class FlexDirectionBasics extends Component {

  render() {

    return (

      // Try setting `flexDirection` to `column`, 'row', '-reverse'.

      <View style={{ flex: 1, flexDirection: 'row-reverse', marginTop: 25 }}>

        <View style={{ width: 100, height: 100, backgroundColor: 'red', borderRadius: 50 }} />

        <View style={{ width: 100, height: 100, backgroundColor: 'yellow', borderRadius: 50 }} />

        <View style={{ width: 100, height: 100, backgroundColor: 'green', borderRadius: 50 }} />

      </View>

    );

  }

};

猎天使魔女2

react hooks useInterval

setInterval with hooks is as egg on React’s face. useInterval() Is a Better API.

blink every second, click toggle to stop or resume

//react native
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import useInterval from 'react-useinterval';

function Blink(props) {
  const [show, setShow] = useState(true);
  const [delay, setDelay] = useState(1000);

  //useInterval is a custom react hook, use at top level of function
  useInterval(() => (
    setShow(!show)
  ), delay);

  toggleBlink = () => {
    if (delay) {
      setDelay(null)
    }
    else {
      setDelay(1000)
    }
  }

  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: 5 }}>
      <Text>{show ? props.text : 'hide'}</Text>
      <Button title='toggle' onPress={() => toggleBlink()}></Button>
    </View>
  );

}

export default function BlinkApp(){
    return (
      <View style={{ marginTop: 30 }}>
        <Blink text='I love to blink' />
      </View>
    );
  }

reference:
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
https://www.npmjs.com/package/react-useinterval
https://facebook.github.io/react-native/docs/button

react native build standalong android app

//cmd

npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject

//app.json

{
  "expo": {
    "name": "native2",
    "slug": "react-native2",
    "privacy": "public",
    "sdkVersion": "35.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "package": "com.chuanshuoge.native1" //com.compnay.app
    }
  }
}

-------------------------
//cmd

C:\Users\bob\react-native2>expo build:android
Checking if there is a build in progress...


? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
 false
Unable to find an existing Expo CLI instance for this directory, starting a new one...
Starting Metro Bundler on port 19001.
Tunnel ready.
Publishing to channel 'default'...
Building iOS bundle
Building Android bundle
Building JavaScript bundle [=====================================================================================] 100%Finished building JavaScript bundle in 23437ms.
Analyzing assets
Building JavaScript bundle [=====================================================================================] 100%Finished building JavaScript bundle in 20697ms.
Finished building JavaScript bundle in 7245ms.
Finished building JavaScript bundle in 4665ms.
Uploading assets
No assets changed, skipped.
Processing asset bundle patterns:
- C:\Users\bob\react-native2\**\*
Uploading JavaScript bundles
Published
Your URL is

https://exp.host/@chuanshuoge/react-native2

› Closing Expo server
› Stopping Metro bundler
Checking if this build already exists...

Build started, it may take a few minutes to complete.
You can check the queue length at https://expo.io/turtle-status

You can monitor the build at

 https://expo.io/builds/c7b4ddf8-6fb4-479e-92aa-1c0163965768

Waiting for build to complete. You can press Ctrl+C to exit.
√ Build finished.
Successfully built standalone app: https://expo.io/artifacts/54141cb8-b79f-40fb-9775-f4deadb03dff

//open link in browser will auto download .apk

------------------------------

drage and drop apk to android simulator will auto install

app works

reference:
https://docs.expo.io/versions/latest/distribution/building-standalone-apps/