ReactNative 学习笔记 Component - ProgressBar，DrawerLayoutAndroid

最新推荐文章于 2023-08-14 16:26:38 发布

vivianking68

最新推荐文章于 2023-08-14 16:26:38 发布

阅读量166

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/vivian_king/article/details/79494473

版权

ReactNative 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文是关于ReactNative中ProgressBar和DrawerLayoutAndroid组件的学习笔记。ProgressBar用于表示加载或进行中的操作，而DrawerLayoutAndroid则是在安卓平台上封装的抽屉布局组件，常用于导航切换，其主视图和导航视图可以通过属性设置和控制。

摘要由CSDN通过智能技术生成

Component - ProgressBar

封装了Android平台上的ProgressBar的React组件。这个组件可以用来表示应用正在加载或者有些事情正在进行中。

ProgressBarAnroid

关键代码：

Sample Code

官网API地址

Component - DrawerLayoutAndroid

封装了平台DrawerLayout（仅限安卓平台）的React组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染

并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。

导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来

抽屉的宽度可以使用drawerWidth属性来指定。

关键代码：

render() {
    var navigationView = (
        <View style={[styles.flex]}>
            <Text style = {styles.title}>This is Draw</Text>
        </View>
    );
    return (
        <DrawerLayoutAndroid
            drawerWidth={100}
            drawerPosition={DrawerLayoutAndroid.positions.Right}
            renderNavigationView={() => navigationView} >
            <View style={styles.drawview}>
                <Text style={styles.drawitem}>Hello</Text>
                <Text style={styles.drawitem}>Draw is Right</Text>
            </View>
        </DrawerLayoutAndroid>
    );
}

Sample Code