如何让页面动起来？

如图是一个简单的购物车页面的UI，分别用来展示商品的名称、价格和数量。

选择状态

这个页面需要一个标示页面请求正常or失败的状态，这里使用枚举值

1
2
3
4
5
6
const RequestStatus = {
    IDLE = 'IDLE',
    PENDING = 'PENDING',
    SUCCESS = 'SUCCESS',
    ERROR = 'ERROR'
}

此外还需要一个列表对象用来展示数据,采用

1
const [products, setProduct] = useState([]);

即一个枚举和一个数组来展示页面。

状态更新

基础数据类型的状态更新

还是看下面的代码，以更新数量为例，首先注册了状态 “count”,然后在组件的返回函数里面，通过按钮的点击事件，调用setCount(count+1)，来达到更新count值的效果。

1
2
3
4
5
6
7
8
9
10
export default function count(){
    const [count ,setCount] = useState(0);
    return {
        <View>
        <Text>{count}</Text>
        <Button title="+" onPress={()=>setCount(count + 1)}></Button>
        <Button title="-" onPress={()=>setCount((count-1)>0? count-1 : 0)}>
        </View>
    };
}

引用数据类型的状态更新

引用数据类型的更新， 需要先析构原数据对象，然后再重新赋值，才可达到更新的效果，对象析构的写法
...countObjects

1
2
3
4
5
setCountObject({...countObject, num: countObject.num+1});

const newCountArray = [...newCountArray]
newCountArray[0]++;
setCountArray(newCountArray)

加载图片

使用方法 底层scheme 使用建议 使用场景
静态图片资源 require(‘./dianxin’) file// 跟随bundle压缩包下发 关键图片
网络图片 {uri:’https://cdn.dianxin.com/..,.png'} http 或 https 自研图片管理工具 大部分场景
宿主应用图片 uri:’dainxin’ file://或 asset:// 不建议 复用场景
Base64图片 ‘uri’:’data:image/jpeg,base64…..’ data:mime/type;base64 自研图片管理工具 小图或者关键图