修改定制view

CustomerView.js

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { BMCUI, ImagePicker } from './ui.js'
 
-async function choosePic(openCamera, selectPic) {
+async function choosePic(openCamera, selectPic, callback) {
     try {
         const {
             path,
@@ -21,26 +21,45 @@ async function choosePic(openCamera, selectPic) {
 
         console.log("path:" + path + " / paths:" + paths);
         BMCUI.show("path:" + path + " / paths:" + paths);
+        if (path) {
+            callback(path)
+        } else if (paths && paths.length > 0) {
+            callback(paths[0])
+        }
     } catch (e) {
         console.error(e);
     }
 }
 
-function imageClick() {
+function imageClick(callback) {
     if (Platform.OS == 'android') {
-        choosePic(ImagePicker.OPEN_CAMERA, ImagePicker.SELECTED_IMAGES);
+        choosePic(ImagePicker.OPEN_CAMERA, ImagePicker.SELECTED_IMAGES, callback);
     } else {
         Alert.alert("ios undefine");
     }
 }
 
 function Cat(props) {
+    /** 
+     * useState is a Hook that lets you add state to function components. 
+     * useState does two things:
+     * 1:it creates a “state variable” with an initial value—in this case the state variable is 'imgUrl' and i
+     *  ts initial value is 'https://reactnative.dev/docs/assets/p_cat2.png'
+     * 2:it creates a function to set that state variable’s value—setImgUrl
+     * It doesn’t matter what names you use. But it can be handy to think of the pattern as [<getter>, <setter>] = useState(<initialValue>).
+     * 
+     * 虽然imgUrl使用了常量关键字const，但它看起来还是可以修改！
+     * What is happening is when a state-setting function like setImgUrl is called, its component will re-render. 
+     * In this case the Cat function will run again—and this time, useState will give us the next value of imgUrl. 
+     * Cat重新刷新，导致useSate重新创建，而不是修改之前得imgUrl得值
+    */
+    const [imgUrl, setImgUrl] = useState("https://reactnative.dev/docs/assets/p_cat2.png");
     return (
         <View style={{ flexDirection: "row" }}>
-            <TouchableNativeFeedback onPress={imageClick}>
+            <TouchableNativeFeedback onPress={() => imageClick((path) => { setImgUrl(path) })} >
                 <Image
                     source={{
-                        uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
+                        uri: imgUrl,
                     }}
                     style={{ width: 120, height: 120 }}
                 />
@@ -55,17 +74,7 @@ export default class CustomerView extends React.Component {
     constructor(props) {
         super(props);
         console.log("CustomerView constructor");
-        /**
-         * useState does two things:
-         * 1:it creates a “state variable” with an initial value—in this case the state variable is textTrans and its initial value is ''
-         * 2:it creates a function to set that state variable’s value—setInputText
-         * It doesn’t matter what names you use. But it can be handy to think of the pattern as [<getter>, <setter>] = useState(<initialValue>).
-         * 
-         * 虽然textTrans使用了常量关键字const，但它看起来还是可以修改！
-         * What is happening is when a state-setting function like setInputText is called, its component will re-render. 
-         * In this case the Cat function will run again—and this time, useState will give us the next value of textTrans. 
-         */
-        //const [textTrans, setInputText] = useState('');
+        //老式的 class 组件在使用 state 的写法上有所不同
         this.state = {
             textTrans: ''
         };
@@ -89,7 +98,8 @@ export default class CustomerView extends React.Component {
 
     shouldComponentUpdate(nextProps, nextState, nextContext) {
         console.log("CustomerView shouldComponentUpdate nextProps:" + nextProps);
-        console.log("CustomerView shouldComponentUpdate nextState.textTrans:" + nextState.textTrans + " / currState.textTrans:" + this.state.textTrans);
+        console.log("CustomerView shouldComponentUpdate nextState.textTrans:" + nextState.textTrans + " / currState.textTrans:" + this.state.textTrans
+            + "nextState.imgUrl:" + nextState.imgUrl + " / currState.imgUrl:" + this.state.imgUrl);
 
         return (nextState.textTrans || this.state.textTrans)
             && (nextState.textTrans.split(' ').length != this.state.textTrans.split(' ').length

android @ 5817bf0f

-Subproject commit 480f15c72f5fa19e9214f06f42dd09953a092d58
+Subproject commit 5817bf0f5f38f7fed90107f3fc9cb685f97ad922