(精华)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
  }
})