(精华)2020年8月10日 React-Native hook的使用

useState 使用也和react一样，其他也一样就不多举例

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

export default function Flex () {
     
  const [count, setCount] = useState(0)
  const addCount = () => {
     
    let newCount = count
    setCount(newCount += 1)
  }
  handelClick = () => {
     
    alert('dianji')
  }
  return (
    <View style={
     styles.container}>
      <Text style={
     [styles.text, {
      backgroundColor: 'red', textAlign: 'center' }]}>{
     count}</Text>
      <Button title="增加" onPress={
     addCount}></Button>
      <Button title="点击" onPress={
     this.handelClick} color="#841584"></Button>
        <ActivityIndicator
          size="large"
          animating={
     true}
          color="#841584"
        ></ActivityIndicator>
        Image source={
     require('./img/dask.gif')} style={
     {
      width: 300, height: 300 }}></Image>
        <Image source={
     {
      uri: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590671406&di=d041102044a03c687bdbee360807c96a&src=http://cdn.duitang.com/uploads/item/201410/04/20141004070754_NFWSQ.jpeg' }}
          style={
     {
      width: 100, height: 100 }}
        ></Image>
        <SafeAreaView style={
     {
      flex: 1, backgroundColor: '#fff' }}>
        <View style={
     {
      flex: 1 }}>
          <Text>Hello World!</Text>
        </View>
      </SafeAreaView>
      <WebView
        source={
     {
      uri: 'https://www.baidu.com' }}
        style={
     {
      marginTop: 20 }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
     
  container: {
     
    width: 100,
    height: 100,
    margin: 10,
    backgroundColor: 'gray'
  },
  text: {
     
    fontSize: 20, margin: 20
  }
})