ReactNative 学习笔记 Component - ProgressBar,DrawerLayoutAndroid

Posted on By Vivian Sun

Component - ProgressBar

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

ProgressBarAnroid

关键代码: <View style={[styles.flex,{marginTop:45}]}> </View>

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

ReactNative API 文档