2017-08-08 16:34:44 H_Ydd 阅读数 1679
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57781 人正在学习 去看看 李宁

react native 获取控件本身的高度

<TouchableOpacity
       onLayout={(e) => this.rowlayouts= e.nativeEvent.layout}

/>


this.rowlayouts.height   //拿到当前控件的高度


//准备工作好了,下节讲仿微信朋友圈自动定位的实现



2016-11-11 11:15:39 RuseAndJack 阅读数 1558
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57781 人正在学习 去看看 李宁

1,首先,要显示控件,需要一个视图画板(View)。React Native绘制视图的组件是 Component。那么,我们就要重载Component对象,制定画板视图,并重载 render() 函数,重新绘制页面时就会调用该方法(详情查看React 组件生命周期),并将UI实现代码放到return中


export default class ThirthDayStudy extends Component {
  render() {
    return (
      // 视图的样式放到styles.container中定义,
      <View style={styles.container}> 
        //  将你的控件代码放到这里…
      </View>
    );
  }
}
// 想了解更多关于属性设置的可以到JavaScript,CSS教程中观摩观摩
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // flex-start 容器的开头; flex-end容器的结尾; center容器的中心;  space-between;  space-around
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center', // start end center left right
    margin: 10,
  },
});



2,按照常例,我们要在刚生成的视图里显示 Hello World!文本

     <View style={styles.container}>
        // view中的布局,回默认由上到下添加 所以,text就是最上面的组件(View中)详情可了解React 的页面布局
        <Text style={styles.welcome}> //  styles.welcome 如上面的定义
          Hello World!// React 初始化默认显示 Welcome to React Native!
        </Text>
      </View>


3,显示图片的控件  Image

 <View style={styles.container}>
           …
      <Image
        style={styles.icon}
        source={require('./image/banner.png')}  // 本地图片 根目录/image文件夹/图片名称
      />
      <Image
        style={styles.logo}
        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} // 网络图片  
      />
           …
      </View>


4, button 按钮及事件 。 在RN中使用按钮有3种:TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback。

TouchableHighlight 点击后产生高亮颜色变化状态;  

TouchableOpacity 点击产生透明度变化状态  点击无变化; 

TouchableWithoutFeedback 官方不推荐使用;


<TouchableHighlight
            style={styles.button}
            onPress={this.onSearchPressed.bind(this)} // 响应方法
            underlayColor='#99d9f4'>  // 高亮颜色
            <Text style={styles.buttonText}>Go</Text>  // 可以在按钮区域显示文本和图片
      </TouchableHighlight>

     // 在 ThirthDayStudy 中添加对应函数
  onSearchPressed() {
    var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  }

var styles = StyleSheet.create({
   …
    button: {
        width: 100,
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor:'#ff0000',
        borderRadius:10   //  圆角
    },
   …
}

     // TouchableOpacity 和 TouchableOpacity 一样 只要设置activeOpacity ,值(如 0.2)即可 
      // 触发事件
onPressIn--用户刚点击
onPressOut--用户手指离开按钮
onPress--用户完成一次点击事件
onLongPress--长按事件
一般来说用户完成一次点击:onPressIn->onPressOut->onPress
但是如果用户按下按钮后移动到按钮外:onPressIn->onPressOut


5,文本输入框

<TextInput
             style={styles.searchInput}
             value={this.state.searchString}
             onChange={this.onSearchTextChanged.bind(this)} // 输入框文本变化是 调用的处理函数
             placeholder='Search via name or postcode'  /> 

…
searchInput: {
     height: 36,
     padding: 4,
     marginRight: 5,
     flex: 4,
     fontSize: 18,
     borderWidth: 1,
     borderColor: '#48BBEC',
     borderRadius: 8,
     color: '#48BBEC'
},
…


重要属性

keyboardType 属性  enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")   决定打开哪种键盘,例如,数字键盘。 


multiline 布尔型

如果值为真,文本输入可以输入多行。默认值为假。


returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')

决定返回键的样式


clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')

清除按钮出现在文本视图右侧的时机


6, 列表 ListView (UITableView)

<ListView
showsVerticalScrollIndicator={false}  // 是否显示滚动条
dataSource={this.state.dataSource.cloneWithRows(this.state.data)}  //  指定数据源
renderRow={(rowData,rowId) => <Text>{rowData}</Text>}  // 每一行的显示 (Cell)
/>

//  在构造函数里,初始化数据源
constructor(props) {
      super(props)

     // row更新的策略
      var dataSource = new ListView.DataSource({
            rowHasChanged:(r1,r2) => r1 != r2,
      })
      // row更新的策略
      this.state = {
            dataSource : dataSource ,
            data : ["A" ,"B" ,"C" ,"D" ,"E" ,"F" ,"G" ,"H"]
      }
  }


7, 滚动视图 ScrollView

<ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        scrollEventThrottle={200}
        contentInset={{top: -50}}
        style={styles.scrollView}>
        
      </ScrollView>

…
contentContainer: { 
backgroundColor: '#6A85B1',
height: 300,
scrollView: 20
 },
…



8, Swiper  用第三方控件 react-native-swiper 。下载该文件放到项目的 ‘node_modules’ 文件夹下面

import Swiper from 'react-native-swiper';

<Swiper height={150} showButtons={true} autoplay={true} 
// 滚动指示点
activeDot={<View style={{backgroundColor: 'rgba(255,255,255,0.8)', width: 8, height: 8, borderRadius: 4, margin: 3}} />} > 
                    <Text style={{flex:1 ,height:150}} >Swiper One</Text>
                    <Text style={{flex:1 ,height:150}} >Swiper tow</Text>
                    <Text style={{flex:1 ,height:150}} >Swiper Three</Text>
              </Swiper>


9, 计时器

let intervel = setInterval( // 开始计时器
            ()=> {

                let currentTime =  (new Date()).getTime()
                let count = currentTime - this.state.intialTime
                let second = Math.floor(count/1000)
                
                this.setState({
                    time: (second<10 ? "0"+second : second),
                })

                if (this.state.buttonTitle == 'Start') { // 在外部改变状态,停止计时器
                    clearInterval(intervel) // 结束计时器
                }
        }, 1000) // 计时器间隔 按 毫秒记


10, tabBarIos

import { TabBarIOS}from 'react-native';

constructor(props) {
        super(props)
        this.state = {
            selectIndex: 0,
            barItems: [{
                title: 'home',
                icon: '',
            } ,{
                title: 'msg',
                icon: '',
            } ,{
                title: 'discover',
                icon: '',
            } ,{
                title: 'member',
                icon: '',
            }]
        }
    }

// 生成 BarItem
baritem(index) {
        return (
            <TabBarIOS.Item
                title={this.state.barItems[index].title} // item 标题
                icon={this.state.barItems[index].icon} // item 图片
                selected={this.state.selectIndex == index}  // item 是否被选中
                onPress={ ()=> {      // item 点击事件
                    this.setState({
                        selectIndex: index
                    })
                }} 
            >
// item 对应的Viewcontroller  继承 Component
                <TabBarViewController nviTitle={this.state.barItems[index].title} />
            </TabBarIOS.Item>
        )
    }

render() {
// 根据数组 生成对应的 BarItem
        var onThis = this
        var items = this.state.barItems.map(function(elem ,index) {
            return (
                onThis.baritem(index)
            )
        })

        return (
            <TabBarIOS barTintColor='#fff' tintColor='#1b95e0' style={{backgroundColor:'#ABC'}} >
                {items}
            </TabBarIOS>
        )
    }



11, RefreshControl 刷新

import {RefreshControl}from 'react-native';
<ScrollView
                refreshControl={<RefreshControl 
                    refreshing={this.state.isRefreshing} // 是否在刷新 ,刷新状态
                    onRefresh={()=> this.refreshAction()} // 刷新触发的事件
                    tintColor='#ff0' />}
            >
                <Text>{this.props.nviTitle + this.state.refreshTime}</Text>
     </ScrollView>


12, PanResponder 手势

import {PanResponder}from 'react-native';

export default class extends Component {
    constructor(props) {
        super(props)
        
        this.state = {
            cicleTop: 64,
            cicleLeft: 0,
        }
    }

    lastLocation = {
        x: 0,
        y: 64,
    }

    stopPan(evt ,gestrueState) {
        this.lastLocation.x = this.state.cicleLeft
        this.lastLocation.y  = this.state.cicleTop
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            //用户开始触摸屏幕的时候,是否愿意成为响应者;
            onStartShouldSetPanResponder: (evt ,gestrueState) => true,
            onStartShouldSetPanResponderCapture: (evt ,gestrueState) => true,
            //在每一个触摸点开始移动的时候,再询问一次是否响应触摸交互; 
            onMoveShouldSetPanResponder: (evt ,gestrueState) => true,
            // 开始手势操作。给用户一些视觉反馈,让他们知道发生了什么事情! 
            onPanResponderGrant: (evt ,gestrueState) => {

            },
            // 最近一次的移动距离  gestureState.move{X,Y} 
            onPanResponderMove: (evt ,gestrueState) => {
                var left = this.lastLocation.x + gestrueState.dx;
                var top  = this.lastLocation.y + gestrueState.dy;

                if (left < 0) {
                    left = 0
                }
                if (top < 64) {
                    top = 64
                }
                
                this.setState({
                    cicleTop: top,
                    cicleLeft: left
                })
            },
            // 用户放开了所有的触摸点,且此时视图已经成为了响应者。  
            // 一般来说这意味着一个手势操作已经成功完成。  
            onPanResponderEnd: this.stopPan.bind(this),
            // 用户放开了所有的触摸点,且此时视图已经成为了响应者。
            onPanResponderRelease: this.stopPan.bind(this),
            // 另一个组件已经成为了新的响应者,所以当前手势将被取消。
            onPanResponderTerminate: this.stopPan.bind(this),
        })
    }

    render() {
        return (
            <View style={{flex:1}} >
                <View style={{width:100, height:100, marginTop: this.state.cicleTop ,marginLeft: this.state.cicleLeft , backgroundColor:'#feb'}} {...this._panResponder.panHandlers} >
                </View>
            </View>
        )
    }
}


相关资料

1 http://wiki.jikexueyuan.com/project/react-native/text-input.html react native 教程 

2 https://segmentfault.com/a/1190000004031633  样式使用 

3 http://www.jianshu.com/p/1293bb8ac969 React-Native组件用法详解之ListView 

4 http://www.jianshu.com/p/7944648bb16a ReactNative的ScrollView简述 

2016-01-29 20:55:51 jiangqq781931404 阅读数 7409
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57781 人正在学习 去看看 李宁

转载请标明出处:

http://blog.csdn.net/developer_jiangqq/article/details/50609194

本文出自:【江清清的博客】

()前言

      【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org     

      今天我们一起来看一下滚动视图ScrollView组件的介绍和使用讲解。

         刚创建的React Native技术交流1群(282693535),React Native交流2群:(496601483),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

         该组件封装了Android平台的ScrollView(滚动视图)组件,并且提供触摸事件"responder"系统功能。使用ScrollViews的时候我们必须要去确保该有一个固定的高度,因为该其实就是包含很多不固定高度的字控件装入到固定的容器中(通过滑动交互)。如果我们要给ScrollView进行设置高度的话,要么我们直接给该ScrollView进行设置高度(注意该方法不建议哦)。另外一种方法是就是该ScrollView的父控件设置相关高度。使用第二种方法ScrollView中是不能加{flex:1},不然不会有效果的。

()官方实例

         首先我们来看一下官方的实例代码,不过该代码整体封装性比较强,可能对于初学者来说初看起来还是有点问题的,不过后面我会写一个例子的,具体代码如下:

'use strict';
var React =require('react-native');
var {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity
} = React;
 
var NUM_ITEMS = 20;
 
var ScrollViewSimpleExample = React.createClass({
  statics: {
    title: '<ScrollView>',
    description: 'Component that enablesscrolling through child components.'
  },
  makeItems: function(nItems: number, styles):Array<any> {
    var items = [];
    for (var i = 0; i < nItems; i++) {
       items[i] = (
         <TouchableOpacity key={i} style={styles}>
           <Text>{'Item ' +i}</Text>
         </TouchableOpacity>
       );
    }
    return items;
  },
 
  render: function() {
    // One of the items is a horizontal scrollview
    var items = this.makeItems(NUM_ITEMS,styles.itemWrapper);
    items[4] = (
      <ScrollView key={'scrollView'} horizontal={true}>
        {this.makeItems(NUM_ITEMS,[styles.itemWrapper, styles.horizontalItemWrapper])}
      </ScrollView>
    );
 
    var verticalScrollView = (
      <ScrollViewstyle={styles.verticalScrollView}>
        {items}
      </ScrollView>
    );
 
    return verticalScrollView;
  }
});
 
var styles =StyleSheet.create({
  verticalScrollView: {
    margin: 10,
  },
  itemWrapper: {
    backgroundColor: '#dddddd',
    alignItems: 'center',
    borderRadius: 5,
    borderWidth: 5,
    borderColor: '#a52a2a',
    padding: 30,
    margin: 5,
  },
  horizontalItemWrapper: {
    padding: 50
  }
});
module.exports =ScrollViewSimpleExample;

运行效果如下图:


()属性方法(这边只关注通用以及Android平台的)

        3.1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

       3.2.contentContainerStyle  样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。实例如下:

return (
      <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView>
      );
   …
 var styles = StyleSheet.create({
          contentContainer:{
                   paddingVertical:20
               }
         });

      3.3.horizontal   表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

     3.4.keyboardDismissMode   枚举类型表示键盘隐藏类型,可选值('none', "interactive", 'on-drag'三个值的意义分别如下:

  • none  默认值,表示在进行拖拽滑动的时候不隐藏键盘
  • on-drag   表示在进行拖拽滑动开始的时候隐藏键盘
  • interactive  表示当拖拽触摸移动的同时隐藏键盘,向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持,所以会和'none'一样的效果。

     3.5.keyboardShouldPersistTaps  该属性默认为false,表示如果当前是textinput控件,并且键盘是弹出状态的话,点击textinput之外地方,会进行隐藏键盘。反之不会有效果,键盘还是成打开状态。

     3.6.onContentSizeChange  function  该当滚动视图的内容尺寸大小发生变化的时候进行调用

     3.7.onScroll  function  该方法在滚动的时候每frame()调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

    3.8.refreshControl  element 设置元素控件,该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.

    3.9.removeClippedSubviews  测试属性 当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除,该设置可以提高滚动的性能。

   3.10.showsHorizontalScrollIndicator  该值设置是否需要显示横向滚动指示条

   3.11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条

   3.12.sendMomentumEvents   ScrollViewonMomentumScrollBegin或者onMomentumScrollEnd方法设置,该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来,然后之前设置的方法进行捕捉。

  生下来的其他属性方法都只适合于iOS平台,这边暂时不做相关讲解。具体请点击查看官方文档

()风格样式

       对于风格样式这块,其实和View视图中差不多的,大家可以点击进行查看View组件的介绍和详解文章    

  • Flexbox...
  • ShadowPropTypesIOS#style…  
  • Transforms...
  • backfaceVisibility enum('visible', 'hidden')
  • backgroundColor color
  • borderBottomColor color
  • borderBottomLeftRadius number
  • borderBottomRightRadius number
  • borderBottomWidth number
  • borderColor color
  • borderLeftColor color
  • borderLeftWidth number
  • borderRadius number
  • borderRightColor color
  • borderRightWidth number
  • borderStyle enum('solid', 'dotted', 'dashed')
  • borderTopColor color
  • borderTopLeftRadius number
  • borderTopRightRadius number
  • borderTopWidth number
  • borderWidth number
  • opacity number
  • overflow enum('visible', 'hidden')

()使用实例

       以上我们对于ScrollView的介绍以及相关属性方法以及样式做了一定的介绍,下面我们来写一个比较简单的实例,来演示一下该ScrollView控件的基本使用。实例代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from'react-native';
 
class ListViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
           进行测试ScrollView控件
        </Text>
         <ScrollView showsVerticalScrollIndicator={true}
             contentContainerStyle={styles.contentContainer}>
            <Text
           style={{color:'#FFF',margin:5,fontSize:16,backgroundColor:"blue"}}>
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
            </Text>
         </ScrollView>
      </View>
    );
  }
}
const styles =StyleSheet.create({
  container: {
    height:400,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  contentContainer: {
      margin:10,
      backgroundColor:"#ff0000",
    }
});
AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);

运行效果如下:


()最后总结

          今天我们主要学习一下ScrollView组件的介绍以及使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

       尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

     关注我的微博,可以获得更多精彩内容

      

2017-08-08 16:20:25 H_Ydd 阅读数 1098
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57781 人正在学习 去看看 李宁

react native 获取当前控件在屏幕中的位置。

<TouchableOpacity
                     ref={(r) => this.scrollview = r}  //得到当前对象组件

/>

componentDidMount() {  //控件加载完后
            UIManager.measureInWindow(    //获得位置是绝对位置
                React.findNodeHandle(that.scrollview),
                (sx, sy, sw, sh) => {   //当前控件在屏幕的横纵坐标,宽高
                  
                });
        }});
    }


//下一个讲如何获取当前控件的高度



2016-06-24 12:19:18 u014484863 阅读数 4275
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57781 人正在学习 去看看 李宁

React Native控件学习之ProgressBarAndroid讲解

(一)前言

今天主要来讲解一下ProgressBarAndroid进度条,ProgressBarAndroid是React Native封装了Android平台的ProgressBat控件。这个组件只要用来在App中内容加载进度显示。

(二)使用介绍

直接上官方代码:

 <View style={{backgroundColor:'green', alignItems:'center'}}>
              <Text>ProgressBarAndroid超级简单实例!</Text>
              <ProgressBarAndroid styleAttr='Inverse'/>
         </View>
},

运行效果如下:
这里写图片描述

(三)属性方法

首先ProgressBarAndroid继承View的所有属性,例如:大小、布局、边距等。

接下来以列表的方式列出属性方法:

名称 作用 value
color 进度条颜色 color颜色
indeterminate 设置是否需要显示一个总的进度值,这个属性是配合Horizontal样式使用的,默认是false bool
progress 设置当前加载进度值 number(0-1)
styleAttr 进度条框风格 enum(‘Horizontal’,’Small’,’Large’,’Inverse’,’SmallInverse’,’LargeInverse’,’Normal’)

(四)ProgressBarAndroid实例

 <View>
              <ProgressBarAndroid color='red' styleAttr='Inverse'/>
              <ProgressBarAndroid color='purple' styleAttr='Horizontal' progress={0.8} indeterminate={false} style={{marginTop:10}} />
              <ProgressBarAndroid color='green' styleAttr='Horizontal' indeterminate={true} style={{marginTop:10}}/>

              <ProgressBarAndroid color='black' styleAttr='SmallInverse' style={{marginTop:10}} />
              <ProgressBarAndroid color='black' styleAttr='Large' style={{marginTop:10}} />
         </View>

运行效果如下所示:
这里写图片描述

没有更多推荐了,返回首页