ReactNative的常用组件

View

  • 个人感觉View就类似于html中的div标签,支持flexbox布局。
  • 一个简单的练习,类似携程的格子布局。
render() {
    return (
      <View style={[styles.flex]}>
        <View style={styles.container}>
          <View style={[styles.item,styles.center]}>
            <Text style={styles.font}>酒店</Text>
          </View>
          <View style={[styles.item,styles.lineLeft]}>
            <View style={[styles.flex,styles.center,styles.lineBottom]}>
              <Text style={styles.font}>机票</Text>
            </View>
            <View style={[styles.flex,styles.center]}>
              <Text style={styles.font}>火车票</Text>
            </View>
          </View>
          <View style={[styles.item,styles.lineLeft]}>
            <View style={[styles.flex,styles.center,styles.lineBottom]}>
              <Text style={styles.font}>旅游</Text>
            </View>
            <View style={[styles.flex,styles.center]}>
              <Text style={styles.font}>攻略</Text>
            </View>
          </View>
        </View>
      </View>

    );

Text

  • Text类似于我们iOS开发中的UILabel控件。
  • UILabel相比,我们实现富文本效果不必那么繁琐,因为Text组件可以嵌套,内部Text组件可以继承外部Text。这样实现富文本效果只需要在内层嵌套Text设置不同的样式表style就可以。
<View style={styles.headBox}>
        <Text style = {styles.font}>
          <Text style = {styles.titleStyle1}>网易</Text>
          <Text style = {styles.titleStyle2}>新闻</Text>
          <Text style = {styles.titleStyle3}>有态度"</Text>
        </Text>
      </View>
  • Text可以通过onPress添加点击事件。注意方法的绑定,以及箭头函数的使用。
  • onLongPress长按回调事件。
  • numberOfLines 最多显示多少行。
  • onLayout function当组件布局发生变化时会调用这个方法。
  • adjustsFontSizeToFit指定字体是否随着给定样式的限制而自动缩放。
  • allowFontScaling控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。
  • selectable决定用户是否可以长按选择文本,以便复制和粘贴。

Navigator

  • NavigatorNavigatorIOS都可以用来管理应用中“场景”的导航(也可以称作屏幕)。导航器建立了一个路由栈,用来弹出,推入或者替换路由状态。它们和html5中的history API很类似。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类,而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOSAndroid,而NavigatorIOS只能用于iOS
  • 导航器通过路由对象来分辨不同的场景。利用renderScene方法,导航栏可以根据指定的路由来渲染场景。
  • 可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。
render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;

    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }
  • push方法中通过params传递参数,通过传递方法到二级页面,pop时调用实现回调方法
push = (Id) =>{
    var _this = this;
    const navigator = this.props.navigator;
    if (navigator) {
      navigator.push({
        name: 'SecondView',
        component: SecondView,
        params: {
          id: Id,
          getUser: function(user) {
            _this.setState({
              user: user
            })

          }
        }
      });
    }

  }
pop = () =>{
    if (this.props.navigator) {
      this.props.navigator.pop();
      let user = USER_MODELS[this.state.Id];
      this.props.getUser(user);
    }

  }

TextInput

  • autoCapitalize:枚举类型,可选值有none sentences wordscharacters 当用户输入时,用于提示
  • placeholder:占位符,在输入前显示的文本内容
  • value:文本输入框的默认值
  • placeholderTextColor:占位符文本的颜色
  • password: boolean类型 true表示密码输入显示*
  • multiline:多行输入
  • editable:文本框是否可输入
  • autoFocus:自动聚焦
  • clearButtonMode:枚举类型,never while-editing unless-editing always 用于显示清除按钮
  • maxLength:能够输入的最长字符数
  • enablesReturnKeyAutomatically:如果为true表示没有文本时键盘是不能有返回键的,其默认值为false
  • returnKeyType:枚举类型default go google join next route search send yahoo done emergency-call表示软键盘返回键显示的字符串
  • secureTextEntry:隐藏输入内容,默认值为false
  • onChangeText:当文本输入框的内容变化时,调用改函数;onChangeText接收一个文本的参数对象
  • onChange:当文本变化时,调用该函数
  • onEndEditing:当结束编辑时,调用改函数
  • onBlur:失去焦点触发事件
  • onFocus:获得焦点时触发事件
  • onSubmitEditing:当结束编辑后,点击键盘的提交按钮触发该事件

Touchable类组件

  • TouchableHighlight 高亮
  • 属性:activeOpacity(设置透明度)、onHideUnderlayonShowUnderlayunderlayColor(点击时背景阴影效果的背景颜色)
  • TouchableOpacity 透明度
  • 属性:activeOpacity
  • TouchableWithoutFeedback 无反馈 不会出现任何视觉变化
  • 不建议使用;属性:onLongPressonPressInonPressOut
  • app中我们希望点击的时候会有一些视觉上的变化,这个变化会提醒我们已经点击过了,从而避免重复点击

Image

  • resizeMode:图片适用的模式covercontainstretch

  • source:图片的引用地址

  • 网络图片:source={{uri:'http://.png'}}

  • 本地图片:source={require('./baidulogo.png')}

  • 静态图片资源:注意:如果你添加图片的时候packager正在运行,则你需要重启packager以便能正确引入新添加的图片

  • 注意:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串。

  • 如果你在编写一个混合App(一部分UI使用React Native,而另一部分使用平台原生代码),也可以使用已经打包到App中的图片资源(通过Xcodeasset类目或者Androiddrawable文件夹打包)
    <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

  • 注意:这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在,而且还需要指定尺寸

  • 注意:网络图片,你需要手动指定图片的尺寸

  • 关于图片的尺寸,React Native会自动为你选好。如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出50%,以使图片看起来仍然足够清晰。这一切过程都是自动完成的,所以你不用操心自己去完成这些繁琐且易错的代码。

Picker

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数
  • itemValue:该属性值为被选中的item的属性值
  • itemPosition:该选择器被选中的item的索引position
  • selectedValue: any任何参数值,选择器选中的item所对应的值,该可以是一个字符串或者一个数字
  • style pickerStyleType 该传入style样式,设置picker的样式风格
    enabled bool 如果该值为falsepicker就无法被点击选中。例如:用户无法进行做出选择
  • mode enum ('dialog','dropdown') 选择器模式。在Android平台上面,设置mode可以控制用户点击picker弹出的样式风格
  • dialog: 该值为默认值,进行弹出一个模态dialog(弹出框)
  • dropdown:picker视图为基础,在该视图下面弹出下拉框
  • prompt string 设置picker的提示语(标题),在Android平台上面,模式设置成'dialog',显示弹出框的标题
<View style={styles.container}>
        <Text >
          Picker选择器实例
        </Text>
        <Picker
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) => this.setState({language: value})}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="javaScript" />
        </Picker>
        <Text>当前选择的是:{this.state.language}</Text>
      </View>

Switch

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • disabled bool如果该值为true,用户就无法点击switch开关控件,默认为false
  • onValueChange function 方法,当该组件的状态值发生变化的时候回调方法
  • value bool 该开关的值,如果该值为true的时候,开关呈打开状态,默认为false
<View style={styles.container}>
        <Text>
           Swtich实例
        </Text>
        <Switch
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>

ProgressBar

  • ProgressViewIOS
  • progress number当前的进度值(0到1之间)。
  • progressImage Image.propTypes.source一个可以拉伸的图片,用于显示进度条。
  • progressTintColor string进度条本身染上的颜色。
  • progressViewStyle enum('default', 'bar')进度条的样式。
  • trackImage Image.propTypes.source 一个可拉伸的图片,用于显示进度条后面的轨道。
  • trackTintColor string 进度条轨道染上的颜色。
<View style={styles.container}>
            <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/>
            <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/>
          </View>
componentDidMount() {
      this.updateProgress();
  }
  updateProgress() {
    var progress = this.state.progress + 0.01;
    this.setState({ progress });
    this.timer = requestAnimationFrame(() => this.updateProgress());
  }
  getProgress(offset) {
    console.log('11');
    var progress = this.state.progress + offset;
    return Math.sin(progress % Math.PI) % 1;
  }
  • ProgressBarAndroid

  • color string 进度条的颜色。

  • indeterminate indeterminateType决定进度条是否要显示一个不确定的进度。注意这个在styleAttr是Horizontal的时候必须是false。

  • progress number当前的进度值(在0到1之间)。

  • styleAttr STYLE_ATTRIBUTES进度条的样式。可取值有:

    • Horizontal
    • Small
    • Large
    • Inverse
    • SmallInverse
    • LargeInverse
<View style={styles.container}>
          <ProgressBarAndroid progress={this.state.progress} {...this.props} />
        </View>

WebView

  • automaticallyAdjustContentInsets:是否自动调整内部内容

  • bounces(IOS):回弹效果 如果为false,则内容拉到底部或头部不回弹,默认为true

  • domStorageEnabled(Android):仅限Android平台。指定是否开启DOM本地存储

  • javaScriptEnabled:仅限Android平台。iOS平台JavaScript是默认开启的

  • contentInset:内部内容偏移值 该值为一个JavaScript对象{top:number,left:number,bottom:number,right:number}

  • source:{{uri:'网址'}}WebView中载入一段静态的html代码或是一个url(还可以附带一些header选项){{html:'html代码块'}}

  • injectedJavaScript:注入的js代码,其值为字符串,如果加上了该属性,就会在webview里面执行js代码(在网页加载之前注入)

  • mediaPlaybackRequiresUserAction:设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为false

  • onNavigationStateChange:监听导航状态变化的函数(当发现浏览器地址改变时,触发事件)

  • renderError:监听渲染页面出错的函数

  • startInLoadingState:是否开启页面加载的状态

  • renderLoading:webview组件正在渲染页面时触发的函数,需要同startInLoadingState一起使用,当startInLoadingStatetrue时该函数才起作用

  • scrollEnabled(IOS):表示webview里面页面是否能滚动,如果其值为true则可以滚动,否则禁止滚动

  • scalesPageToFit:按照页面比例和内容宽高比例自动缩放内容

ListView

  • 列表
  <ListView
                dataSource={this.dataSource.cloneWithRows(this.state.dataArr)}
                renderRow={this.renderRow} //设置cell
                style={{width:screenWidth}}
                onEndReached={ this._toEnd }
                onEndReachedThreshold={20}
                renderFooter={ this._renderFooter }
                enableEmptySections = {true}
                refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefresh}
                            onRefresh={this._onRefresh}
                            tintColor="gray"
                            title="Loading..."
                            titleColor="gray"
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            progressBackgroundColor="#ffff00"
                        />}
            />
  • 卡片
<ListView //创建ListView
                dataSource={this.dataSource.cloneWithRows(this.state.car)} //设置数据源
                renderRow={this.renderRow} //设置cell
                contentContainerStyle={styles.listViewStyle}//设置cell的样式
                onEndReached={ this._toEnd }
                onEndReachedThreshold={10}
                renderFooter={ this._renderFooter }
                enableEmptySections = {true}
                removeClippedSubviews={false}
                refreshControl={
                        <RefreshControl
                            refreshing={this.isRefreshing}
                            onRefresh={this._onRefresh}
                            tintColor="gray"
                            title="Loading..."
                            titleColor="gray"
                            colors={['#ff0000', '#00ff00', '#0000ff']}
                            progressBackgroundColor="#ffff00"
                        />}
            />
  • 分组
render(){
        const { brand} = this.props;
        var  Arr = brand ,
            sectionIDs =[],//所有区ID的数组
            rowIDs =[];//行ID数组
        for (let i in brand ) {
            sectionIDs.push(i);
            rowIDs.push(brand[i])
        }
        return(
                <ListView//创建表,并设置返回section和cell的方法
                    dataSource={this.dataSource.cloneWithRowsAndSections(Arr,sectionIDs,rowIDs)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    renderHeader={this.renderHeader }
                />
        )
    }

推荐阅读更多精彩内容