ReactNative的常用组件

2017-02-27 本文已影响438人 45b645c5912e

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

Navigator和NavigatorIOS都可以用来管理应用中“场景”的导航（也可以称作屏幕）。导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。它们和html5中的history API很类似。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类，而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容iOS和Android，而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(设置透明度)、onHideUnderlay、onShowUnderlay、underlayColor(点击时背景阴影效果的背景颜色)
TouchableOpacity 透明度
属性：activeOpacity
TouchableWithoutFeedback 无反馈不会出现任何视觉变化
不建议使用；属性：onLongPress、onPressIn、onPressOut
在app中我们希望点击的时候会有一些视觉上的变化，这个变化会提醒我们已经点击过了，从而避免重复点击

Image

resizeMode：图片适用的模式cover、contain、stretch
source:图片的引用地址
网络图片：source={{uri:'http://.png'}}
本地图片：source={require('./baidulogo.png')}
静态图片资源：注意：如果你添加图片的时候packager正在运行，则你需要重启packager以便能正确引入新添加的图片
注意：为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串。
如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）
<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 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择
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一起使用，当startInLoadingState为true时该函数才起作用
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 }
                />
        )
    }

ReactNative的常用组件

View

Text

Navigator

TextInput

Touchable类组件

Image

Picker

Switch

ProgressBar

WebView

ListView

猜你喜欢

热点阅读