react native ScrollView
发布在react native2015年12月9日view:3759react-native
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

上篇说到ScrollView,发现这东西挺神的。这节详细说一下:

/**
 * ScrollView 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View
} = React;

var AwesomeProject = React.createClass({
  log: function(){
    console.log("----")
  },
  render: function() {
    var repeatArr = Array(100).join("1").split("")
    return (
      <View style={styles.parent}>
        <View style={styles.header}>
          <Text style={styles.text}>
           登录
          </Text>
        </View>
        <ScrollView scrollEventThrottle={16} style={styles.main} horizontal={true} onScroll={this.log}>
          {
            repeatArr.map(function(el, index){
              return <Text key={index} style={[styles.text,{color:'#000'}]}>
              <Text style={styles.b}>{index}</Text>
              这是主面板{'\n'}
              </Text>
            })
          }
        </ScrollView>
        <View style={styles.footer}>
          <Text style={styles.text}>
           注册地址
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

我们改一下上次的例子,为它添加一个onScroll事件,注意需要添加scrollEventThrottle选项,否则此方法只执行一次。并且将移动方向改成水平的。

enter image description here

我们再建另一个项目,这次放多点滚动视图看效果。

parent {
  flex:1;
  flex-direction:column;

  background-color: #ddc;
}

s1{
  flex:1;
  background-color: #EFDA5B;
}
s2{
  flex:1;
  background-color: #A4FAB0;
}
s3{
  flex:1;
  background-color: #FB3568;
}
header{
  height:40;
  background-color: #31b0d0;
}
footer{
  height:40;
  background-color: #5cb55c;
}
b {
  font-weight: bold;
}
text{
  padding:10;
  font-size:12;
  color:#fff;
  line-height:18;
}

主程序如下:


/**
 * ScrollView 司徒正美
 */
'use strict';

var React = require('react-native');
var styles = require('./style')
var {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  View
} = React;

var AwesomeProject = React.createClass({
  log: function(){
    console.log("----")
  },
  render: function() {
    var repeatArr = Array(100).join("1").split("")
    return (
      <View style={styles.parent}>
        <View style={styles.header}>
          <Text style={styles.text}>
           登录
          </Text>
        </View>
        <ScrollView style={styles.s1} pagingEnabled={true} >
          {
            repeatArr.map(function(el, index){
              return <Text key={index} style={[styles.text,{color:'#000'}]}>
              <Text style={styles.b}>{index}</Text>
              这是主面板{'\n'}
              </Text>
            })
          }
        </ScrollView>
        <ScrollView  style={styles.s2}  >
          {
            repeatArr.map(function(el, index){
              return <Text key={index} style={[styles.text,{color:'#000'}]}>
              <Text style={styles.b}>{index}</Text>
              这是主面板{'\n'}
              </Text>
            })
          }
        </ScrollView>
        <ScrollView style={styles.s3} stickyHeaderIndices={[0]} >
          {
            repeatArr.map(function(el, index){
              return <Text key={index} style={[styles.text,{color:'#000'}]}>
              <Text style={styles.b}>{index}</Text>
               {index == 0 ?'这是第一行\n': '这是主面板\n' }
              </Text>
            })
          }
        </ScrollView>
        <View style={styles.footer}>
          <Text style={styles.text}>
           注册地址
          </Text>
        </View>
      </View>
    );
  }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

enter image description here

这里演示两个重要的功能, 一个分页,一个表头固定。 从功能丰富度来看,ScrollView的确比JS界的其他滚动条插件强大得多啊!

更详细的参数请看官网。

评论
发表评论
暂无评论
WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
react native

用于放置react native的相关文章

我的收藏