Commit 5cdfa1c7 by leiyongsheng

修改定制view

parent 774edc0c
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment