【水滴石穿】ReactNativeDemo

最新推荐文章于 2024-06-08 17:39:03 发布
最新推荐文章于 2024-06-08 17:39:03 发布
阅读量169 收藏
点赞数
文章标签： javascript 移动开发 ViewUI
原文链接：http://www.cnblogs.com/smart-girl/p/10894409.html
版权

这个博主他的功底算是特别棒的了，能够把一些基础的例子，通过精巧的方式布局在一个小的demo里面
很值得我学习
放上博主的链接：https://github.com/jianiuqi/ReactNativeDemo1037363-20190520150057417-389718644.png
1037363-20190520150120794-1795365089.png
大概样式是这样
接下来我们来分析代码

//index.js
//根index.js引入的是src/app
/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from "./src/App";

AppRegistry.registerComponent(appName, () => App);

这个是main.js页面
1037363-20190520150730722-962789463.png

//src/navigator/Main.js
import React, {Component} from 'react';
import {Button, Platform, StyleSheet, Text, View, Alert, Image, FlatList} from 'react-native';
import PropsDemo from "../simple/PropsDemo";
import TextInputDemo from "../widget/TextInputDemo";
import ButtonDemo from "../widget/ButtonDemo";
import SectionListDemo from "../widget/SectionListDemo";

type Props = {};

class Main extends Component<Props> {

    static navigationOptions = (navigation) => {
        return {
            title: '主页',
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            }
        };
    };

    render() {

        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Props（属性）', value: 'PropsDemo'},
                        {key: 'State（状态）', value: 'PropsDemo2'},
                        {key: 'State（状态）实例二', value: 'StateDemo'},
                        {key: '使用Flexbox布局', value: 'FlexDemo'},
                        {key: '处理文本输入', value: 'TextInputDemo'},
                        {key: '处理触摸事件', value: 'ButtonDemo'},
                        {key: 'Touchable使用示例', value: 'TouchableDemo'},
                        {key: '使用滚动视图', value: 'ScrollViewDemo'},
                        {key: '长列表数据', value: 'FlatListDemo'},
                        {key: '分组列表Demo', value: 'SectionListDemo'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item} onPress={() => {
                        this.props.navigation.navigate(item.value);
                    }}>{item.key}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

module.exports = Main;

1037363-20190520150853291-2073110499.png

//src/navigator/Setting.js
import React, {Component} from 'react';
import {Text, View} from "react-native";

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

module.exports = SettingsScreen;
//src/navigator/Detail.js
//详情页在手机上面没有找到
import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity, Button,
} from 'react-native';

class Detail extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({

            headerTitle: navigation.state.params.key,
            //设置滑动返回的距离
            gestureResponseDistance: {horizontal: 300},

            //是否开启手势滑动返回，android 默认关闭 ios打开
            // gesturesEnabled: true,

            //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
            headerBackTitle: null,
            //导航栏的样式
            headerStyle: styles.headerStyle,
            //导航栏文字的样式
            headerTitleStyle: styles.headerTitleStyle,
            //返回按钮的颜色
            headerTintColor: 'white',

            //隐藏顶部导航栏
            // header: null,

            //设置顶部导航栏右边的视图  和 解决当有返回箭头时，文字不居中
            headerRight: (<View/>),

            //设置导航栏左边的视图
            // headerLeft: (<View/>),

        }

    );

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} activeOpacity={0.5}>
                    <Text style={{color: 'white'}}>跳转至带有菜单的导航栏页面</Text>
                </TouchableOpacity>
                <Text style={{marginTop: 10, color: 'black'}}>当前是Details页面</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Detail', {key: 'push结果'})}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 240,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    },
    headerStyle: {
        backgroundColor: '#4398ff',
    },
    headerTitleStyle: {
        color: 'white',
        //设置标题的大小
        fontSize: 18,
        //居中显示
        alignSelf: 'center',
    },
});

module.exports = Detail;
//
 // 是这种方式直接渲染跳过去的
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Props（属性）', value: 'PropsDemo'},
                        {key: 'State（状态）', value: 'PropsDemo2'},
                        {key: 'State（状态）实例二', value: 'StateDemo'},
                        {key: '使用Flexbox布局', value: 'FlexDemo'},
                        {key: '处理文本输入', value: 'TextInputDemo'},
                        {key: '处理触摸事件', value: 'ButtonDemo'},
                        {key: 'Touchable使用示例', value: 'TouchableDemo'},
                        {key: '使用滚动视图', value: 'ScrollViewDemo'},
                        {key: '长列表数据', value: 'FlatListDemo'},
                        {key: '分组列表Demo', value: 'SectionListDemo'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item} onPress={() => {
                        this.props.navigation.navigate(item.value);
                    }}>{item.key}</Text>}
                />
            </View>

1037363-20190520151638180-365191532.png

//src/simple/PropsDemo.js
import React, { Component } from 'react';
import { Image } from 'react-native';

export default class PropsDemo extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width: 193, height: 110}} />
        );
    }
}

1037363-20190520151742941-861592703.png

//src/simple/PropsDemo2.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Text>Hello {this.props.name}!</Text>
            </View>
        );
    }
}

export default class PropsDemo2 extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Greeting name='Rexxar' />
                <Greeting name='Jaina' />
                <Greeting name='Valeera' />
            </View>
        );
    }
}

1037363-20190520151913601-493075733.png

//src/simple/StateDemo.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = { isShowingText: true };

        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState(previousState => {
                return { isShowingText: !previousState.isShowingText };
            });
        }, 2000);
    }

    render() {
        // 根据当前showText的值决定是否显示text内容
        if (!this.state.isShowingText) {
            return null;
        }

        return (
            <Text>{this.props.text}</Text>
        );
    }
}

export default class StateDemo extends Component {
    render() {
        return (
            <View>
                <Blink text='I love to blink' />
                <Blink text='Yes blinking is so great' />
                <Blink text='Why did they ever take this out of HTML' />
                <Blink text='Look at me look at me look at me' />
            </View>
        );
    }
}

1037363-20190520152036998-661212615.png

//src/simple/FlexDemo.js
import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDemo extends Component {
    render() {
        return (
            // 试试去掉父View中的`flex: 1`。
            // 则父View不再具有尺寸，因此子组件也无法再撑开。
            // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 3, backgroundColor: 'steelblue'}} />
                <View style={{width:200, height:100, backgroundColor: 'purple'}}/>
            </View>
        );
    }
}

1037363-20190520152144997-1675323052.png

//src/widget/TextInputDemo.js
import React, {Component} from 'react';
import {Text, TextInput, View} from 'react-native';

export default class TextInputDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40}}
                    placeholder="Type here to translate"
                    onChangeText={(text) => this.setState({text})}
                />
                <Text style={{padding:10, fontSize:42}}>
                    {this.state.text.split(' ').map((word) => word&&'?').join(' ')}
                </Text>
            </View>
        );
    }
}

1037363-20190520152311922-754434567.png

//src/widget/TouchableDemo.js
import React, {Component} from 'react';
import {
    Alert,
    Platform,
    StyleSheet,
    Text,
    TouchableHighlight,
    TouchableOpacity,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    View
} from 'react-native';

export default class TouchableDemo extends Component {

    _onPressButton() {
        Alert.alert('You tapped the button!')
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!')
    }


    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighlight</Text>
                    </View>
                </TouchableHighlight>
                <TouchableOpacity onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                <TouchableNativeFeedback
                    onPress={this._onPressButton}
                    background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback
                    onPress={this._onPressButton}
                >
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton}
                                    underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Touchable with Long Press</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
    },
    buttonText: {
        padding: 20,
        color: 'white'
    }
})

1037363-20190520152409598-498564581.png

//src/widget/ScrollViewDemo.js
import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class ScrollViewDemo extends Component {
    render() {
        return (
            <ScrollView>
                <Text style={{fontSize:96}}>Scroll me plz</Text>
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Text style={{fontSize:96}}>If you like</Text>
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Text style={{fontSize:96}}>Scrolling down</Text>
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Text style={{fontSize:96}}>What's the best</Text>
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Text style={{fontSize:96}}>Framework around?</Text>
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Image source={{uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64}} />
                <Text style={{fontSize:80}}>React Native</Text>
            </ScrollView>
        );
    }
}

1037363-20190520152558863-140844757.png

//src/widget/FlatListDemo.js
import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';

export default class FlatListDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Devin'},
                        {key: 'Jackson'},
                        {key: 'James'},
                        {key: 'Joel'},
                        {key: 'John'},
                        {key: 'Jillian'},
                        {key: 'Jimmy'},
                        {key: 'Julie'},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

1037363-20190520152645538-651951846.png

//src/widget/SectionListDemo.js
import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'D', data: ['Devin']},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
})

呃呃呃呃，我们下一篇见～

转载于:https://www.cnblogs.com/smart-girl/p/10894409.html

weixin_30505751
关注
React Native八大Demo
08-02 539
参考资料：http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 ...
React Native Demo
02-22
一个关于react-native 的demo， 各种控件比较齐全，基于2018-2-22最新的RN写就！
reactNativeDemo:reactNative初学者demo
04-30
reactNativeDemo reactNative初学者demo 介绍 根据reactNative零基础教程编写的实例 教程中是用ES5写的ios版 我是用ES6写的android版 安装与运行 npm install react-native run-android 组件 Text, View, Image,TabNavigator,Navigator,WebView,TouchableOpacity,ListView, ScrollView TabNavigator是github上开源的一个rn组件，是适用于ios和安卓两个平台的底部导航栏 npm install react-native-tab-navigator --save import TabNavigator from 'react-native-tab-navigator';
react-native demo
weixin_30682415的博客
07-24 129
1.因为我的react-native项目是按照官网上面一步一步init的，react-native cli 是自动link第三方插件的，所以在install第三方插件的时候，不必进行手动配置 2.使用react-native-vector-icons 的时候，需要将nodemodule中的react-native-vector-icons /Fonts文件夹下面东西拷贝到android\app...
react native demo
12-30
react native demo 运行。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
成语故事剧场《水滴石穿》剧本
08-19
成语故事剧场《水滴石穿》剧本 《水滴石穿》是中国古典成语故事，讲述了一个贪婪县丞的恶行和一个新来的县令的公正和智慧。故事中，县丞在民间搜刮民脂民膏，鱼肉百姓，令当地民不聊生，百姓怨声载道。新来的县令...
水滴石穿C语言
03-28
水滴石穿C语言之C语言的底层操作 水滴石穿C语言之extern声明辨析 水滴石穿C语言之static辨析 水滴石穿C语言之typedef的问题 水滴石穿C语言之编译器引出的问题 水滴石穿C语言之代码检查工具 水滴石穿C语言之可变参数...
水滴石穿_csdn
08-19
标题中的“水滴石穿”是一个成语，源自中国古代的一个故事，描述的是一种坚持不懈、持之以恒的精神。这个故事和成语在中国传统文化中被广泛传播，并被引申为一种哲学思想，即不论目标多么艰难、过程多么漫长，只要...
水滴石穿C语言之指针、数组和函数
最新发布
06-23
水滴石穿C语言之指针、数组和函数
水滴石穿c语言-pdf格式
05-14
水滴石穿C语言之C语言的底层操作.pdf 水滴石穿C语言之extern声明辨.pdf 水滴石穿C语言之static辨析.pdf 水滴石穿C语言之编译器引出的.pdf 水滴石穿C语言之代码检查工具.pdf 水滴石穿C语言之可变参数问.pdf 水滴石穿...
react native 实现app demo
12-07
一个基础的react native & react-navigation V2 最新的 app框架react native 实现app demo
React-Native官方demo(对应 最新v0.55.0版本20180620编译)
06-20
2018年6月20最新编译React-Native官方demo,可直接运行版本。对应执行如下命令： 1.D:\reactnative\RNTester> react-native bundle --platform android --dev false --entry-file js/RNTesterApp.android.js --bundle-output android/app/src/main/assets/RNTesterApp.android.bundle --assets-dest android/app/src/main/res/ 2.D:\reactnative\RNTester\android>gradlew :app:installDebug
React-native-demo:一个react native android的小demo
05-04
React-native-demo Android Developer，花时间学习了下React Native，然后参考ZhihuDaily-React-Native自己做了一个小demo。 目前只做了Android部分，Ios还没来得及写。 当前具备的功能是： 1.闪屏页（Splash） 2.首页（MainPage） ps：目前存在的缺陷是，使用Navigator导航到其他页面会出现空白，还正在排查中。
react-native的demo
01-10
一个react-native的代码，包含一个自定义android组件的实例
react-native-demo:React Native演示应用
04-30
＃相同的骑行演示 请注意：该代码不适用于生产用途。 这只是概念证明 ###支持的输入 要查看地图小部件的工作方式，您需要输入以下城市： 纽约 泽西城 纽瓦克 欧文顿 纳特利 ###支持的设备 应用程序已在iPhone 5s，5c，6、6 plus，6s，6s plus上进行了测试 ###申请流程 ###在Xcode中运行 克隆此存储库 在Xcode中打开ios / CompanionsApp.xcodeproj 运行项目 ###运行开发 克隆此存储库 npm install npm start或npm hot如果要启用热重装） 在Xcode中打开ios / CompanionsApp.xcodeproj 打开文件AppDelegate.m并取消和评论 运行项目
React Native第一个Demo（1）
空杯子
06-03 5169
在Demo主要是展示一个电影信息和在ListView展示25个电影信息。1、初始化一个项目并运行打开终端，输入：react-native init DemoProject输入后初始化一个项目返回信息如下： 有时候Installing react-native package from npm… 这一步会很慢，耐心等待，没问题的。init DemoProject This will walk yo
React Native 快速Demo（1）
十步杀一人-千里不留行
06-08 651
通过以上步骤，可以快速实现一个基本的项目雏型demo，涵盖了核心功能模块，如用户登录、数据采集、地图显示和数据同步。可以在此基础上进行进一步的优化和扩展，根据实际需求添加更多功能和细节。
React-native 官方 demo
weixin_33859665的博客
08-24 371
React-native 官方 demo 按官网提供方式安装 java jdk1.8.x, python 2.7.x, android-studio, android-sdk 配置jdk, android 环境变量。 安装 react-native-cli (1.2.0) 安装依赖 react-native (0.55.4) // 注意指定版本,之前一直使用最新版本，demo...
一个简单的ReactNative demo
夏洛克的猫
08-24 1587
本人非前端,请轻喷 ReactNative版本:0.31 github:https://github.com/X-FAN/reactnativelearn代码做了一些简单的注释,下面是源码import React, { Component } from 'react'; import { AppRegistry, Navigator, ToastAndro
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值