BikeApp_demo/src/views/device/DeviceShare.tsx

import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { rpx } from '../../utils/rpx';
import { useNavigation } from '@react-navigation/native';   
const DeviceShare = () => {
    const navigation = useNavigation();
    return (
        <View style={styles.container}>
            <View style={styles.shareBox}>
                <Text style={styles.shareTitle}>共享钥匙（2/3）</Text>
                <Text style={styles.shareTxt}>临时借用车辆，可以使用基础控车功能</Text>
                <View style={styles.card}>
                    <View style={styles.cardTop}>
                        <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.cardTopImg}></Image>
                        <View style={styles.cardTopTxt}>
                            <Text style={styles.cardTopName}>张三</Text>
                            <Text style={styles.cardTopPhone}>13860332568</Text>
                        </View>
                        <Text style={styles.cardType}>待领取</Text>
                    </View>
                    <View style={styles.cardBottom}>
                        <Text style={styles.lasttime}>剩余有效期：23小时27分</Text>
                        <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uGq4yJlU1ZZRkwiJ8Y74' }} style={styles.lasttimeImg}></Image>
                    </View>
                </View>
                <TouchableOpacity onPress={() => {
                    navigation.navigate('AddShare' as never);
                }}>  
                <View style={styles.addBtn}>
                    <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uI4CdJFzS1GkY1AzfFyG' }} style={styles.addBtnImg}></Image>
                    <Text style={styles.addBtnTxt}>添加成员</Text>
                </View>
                </TouchableOpacity>
                
            </View>
            <View style={styles.shareTip}>
                <Text style={styles.shareBtnTxt}>查看已失效共享</Text>
                <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uGq4yJlU1ZZRkwiJ8Y74' }} style={styles.lasttimeImg}></Image>
            </View>

        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F3FCFF',
        alignItems: 'center',
    },
    addBtnImg: {
        width: rpx(32),
        height: rpx(32),
    },
    shareTip: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: rpx(44),
    },
    shareBtnTxt: {
        fontSize: rpx(32),
        color: '#808080',
    },
    addBtn: {
        width: rpx(592),
        height: rpx(108),
        backgroundColor: '#ffffff',
        borderRadius: rpx(16),
        marginTop: rpx(30),
        borderWidth: rpx(2),
        borderColor: '#808080',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
    addBtnTxt: {
        marginLeft: rpx(12),
        fontSize: rpx(36),
        color: '#808080',
    },
    cardBottom: {
        flexDirection: 'row',
        alignItems: 'center',
        display: 'flex',
        flexWrap: 'nowrap',
    },
    lasttime: {
        marginLeft: rpx(124),
        fontSize: rpx(24),
        color: '#4297F3',
    },
    lasttimeImg: {
        marginLeft: 'auto',
        width: rpx(24),
        height: rpx(24),
    },
    cardTop: {
        flexDirection: 'row',
        alignItems: 'center',
        display: 'flex',
        flexWrap: 'nowrap',
    },
    cardType: {
        marginLeft: 'auto',
        alignSelf: 'flex-start',
        fontSize: rpx(32),
        color: '#4297F3',
    },
    cardTopTxt: {
        marginLeft: rpx(28),

    },
    cardTopImg: {
        width: rpx(96),
        height: rpx(96),
        borderRadius: rpx(48),
    },
    cardTopName: {

        fontSize: rpx(44),
        color: '#3D3D3D',
    },
    cardTopPhone: {
        fontSize: rpx(36),
        color: '#808080',
    },

    shareBox: {
        width: rpx(688),
        borderRadius: rpx(30),
        backgroundColor: '#fff',
        padding: rpx(32),
    },
    shareTitle: {
        fontWeight: 'bold',
        fontSize: rpx(44),
        color: '#3D3D3D',
    },
    shareTxt: {
        marginTop: rpx(14),
        fontWeight: '500',
        fontSize: rpx(28),
        color: '#999',
    },
    card: {
        width: rpx(592),
        padding: rpx(32),
        marginTop: rpx(32),
        borderRadius: rpx(16),
        borderWidth: rpx(2),
        borderColor: '#808080 ',

    },
});
export default DeviceShare;