React-Native on Dapeng Zhang

React Native 之状态指示器【加载数据的状态等待】

Wed, 02 Jul 2025 16:01:03 +0000

结合上几篇博文,今天学习下，如果来优化一下我们的状态指示器。

前面几篇文章，在renderLoadingView方法中，直接使用了一个View，然后加了一个简单的字符串进行提示，看起来还是简陋的很。

修改之后，这个方法的代码如下：

renderLoadingView:function(){
 return (
 <LoadingView /> 
 );
},

这个LoadingView方法，是根据官方教程进行改写的，其中有个小提示，里面用到了react-timer-mixin这个库，还是提交安装比较好，不然后面还要安装之后再重新启动。

重要的问题就上面这些了，下面把LoadingView整个代码贴到下面:

'use strict';

var React = require('react-native');

var {
 ActivityIndicatorIOS,
 StyleSheet,
 View
} = React;

var TimerMixin = require('react-timer-mixin');

var LoadingView = React.createClass({
 mixins:[TimerMixin],
 getInitialState:function(){
 return {
 animating:true
 }
 },
 setToggleTimeout:function(){
 this.setTimeout(
 () => {
 this.setState({animating:!this.state.animating});
 this.setToggleTimeout();
 },
 1200
 );
 },
 componentDidMount:function(){
 this.setToggleTimeout();
 },
 render:function(){
 return (
 <View>
 <ActivityIndicatorIOS 
 animating={this.state.animating} 
 style={[styles.centering, {height:80}]} 
 size="large" />
 </View>
 );
 }
});

var styles = StyleSheet.create({
 centering: {
 alignItems: 'center',
 justifyContent: 'center',
 marginTop:65
 }
});

module.exports = LoadingView;

好了，样式啥的我都调整好了，你就贴进去，在根据自己的需求修改下吧。

React Native 之列表【ListView 添加点击列表跳转到指定视图】

Wed, 02 Jul 2025 16:01:00 +0000

上一篇文章中我们了解了一下，简单的添加列表，但是列表添加了，点击列表没有什么反应啊，这不就没啥作用了，这里记录下如何实现点击的效果。

React Native中有个组件叫做TouchableHighlight，一看这名字就知道干啥的了，然后我们在这上面加一个touch的事件。

这里我把上一节的renderMovie的方法代码列到这里：

renderMovie:function(movie){
 return (
 <TouchableHighlight onPress={() => this._pressRow(movie.id)}>
 <View style={styles.container} key={movie.id}>
 <Image
 source={{uri:movie.posters.thumbnail}}
 style={styles.thumbnail} />
 <View style={styles.rightContainer}>
 <Text style={styles.title} numberOfLines={1}>
 {movie.title}
 </Text>
 <Text style={styles.year}>
 {movie.year}
 </Text>
 </View>
 <View style={styles.separator}></View>
 </View>
 </TouchableHighlight>
 );
 },

然后我们给这个onPress添加一个指定的事件函数

_pressRow:function(rowID: number){
 this.props.navigator.push({
 title:'详情',
 component:MovieView
 })
 }

这里的组件MovieView,我加在了另外一个文件里面，代码如下：【自己可以进行引入】

'use strict';

var React = require('react-native');

var {
 StyleSheet,
 Text,
 View
} = React;

var MovieView = React.createClass({
 render:function(){
 return (
 <View style={styles.container}>
 <Text>Movie View</Text>
 </View>
 );
 }
});

var styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
 }
});

module.exports = MovieView;

好了，运行吧，可以跳转了，还是蛮简单的。

添加了这些，还有个问题，就是要如何才能修改按下去时背景色的颜色，其实只要加入这行代码就好了：

underlayColor='rgba(24,36,35,0.1)'

最终我的renderMovie代码就成了如下的样子：

renderMovie:function(movie){
 return (
 <TouchableHighlight underlayColor='rgba(24,36,35,0.1)' onPress={() => this._pressRow(movie.id)}>
 <View style={styles.container} key={movie.id}>
 <Image
 source={{uri:movie.posters.thumbnail}}
 style={styles.thumbnail} />
 <View style={styles.rightContainer}>
 <Text style={styles.title} numberOfLines={1}>
 {movie.title}
 </Text>
 <Text style={styles.year}>
 {movie.year}
 </Text>
 </View>
 <View style={styles.separator}></View>
 </View>
 </TouchableHighlight>
 );
 },

React Native 之列表【ListView，NavigatorIOS】

Wed, 02 Jul 2025 16:00:52 +0000

React-Native最近看了下他的ListView组件，记录下自己实现的小小功能：

一个简单的列表都没啥特别的了，这里添加一个导航。

首先使用NavigatorIOS组件，给我们的首页添加一个导航

var WalkerfreeProject = React.createClass({
 render:function(){
 return (
 <NavigatorIOS
 style={styles.container}
 initialRoute={{
 'title':'Welcome',
 'component': Movies,
 }} />
 );
 }
});

如果只是就这么几行代码，还是有问题的，需要加一下样式

var styles = StyleSheet.create({
 container: {
 flex: 1,
 }
});

最后组件注册

AppRegistry.registerComponent('WalkerfreeProject', () => WalkerfreeProject);

Movies这个就是一个ListView的组件。

var React = require('react-native');

var {
 AppRegistry,
 Image,
 ListView,
 StyleSheet,
 Text,
 View,
 NavigatorIOS,
 ScrollView,
 Navigator
} = React;

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

var Movies = React.createClass({
 getInitialState:function(){
 return {
 dataSource:new ListView.DataSource({
 rowHasChanged:(row1, row2) => row1 != row2
 }),
 loaded:false
 }
 },
 componentDidMount:function(){
 this.fetchData();
 },
 fetchData:function(){
 fetch(REQUEST_URL)
 .then((response) => response.json())
 .then((responseData) => {
 this.setState({
 dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
 loaded:true
 });
 })
 .done()
 },
 renderLoadingView:function(){
 return (
 <View style={styles.container}>
 <Text>
 Loading Views
 </Text>
 </View>
 );
 },
 renderMovie:function(movie){
 return (
 <View style={styles.container} key={movie.id}>
 <Image
 source={{uri:movie.posters.thumbnail}}
 style={styles.thumbnail} />
 <View style={styles.rightContainer}>
 <Text style={styles.title} numberOfLines={1}>
 {movie.title}
 </Text>
 <Text style={styles.year}>
 {movie.year}
 </Text>
 </View>
 <View style={styles.separator}></View>
 </View>
 );
 },
 render: function() {
 if(!this.state.loaded){
 return this.renderLoadingView();
 }

 return (
 <ListView
 dataSource={this.state.dataSource}
 renderRow={this.renderMovie}
 style={styles.listView} />
 );
 }
});

var styles = StyleSheet.create({
 separator: {
 height: 1,
 backgroundColor: '#CCCCCC',
 },
 listView:{
 marginTop:65,
 },
 container: {
 flex: 1,
 },
 thumbnail: {
 width: 53,
 height: 81,
 },
 rightContainer:{
 flex:1,
 position:'absolute',
 top:0,
 left:55
 },
 title:{
 fontSize:20,
 marginBottom:8,
 textAlign:'left',
 width:260
 },
 year:{
 textAlign:'center'
 }
});

module.exports = Movies;

整个代码就贴到这里了，没有啥需要说明的。这个官网也是有的，只是注意一下这里的样式就好了。当然在index.ios.js的里面要引入

var Movies = require('./App/Movies');

这个我是他Movies添加到了App这个目录里了，所以需要自己引入一下。其实也还是蛮简单的，因为就是一个简单的例子而已

React-Native on Dapeng Zhang

React Native 之 状态指示器【加载数据的状态等待】

React Native 之 列表【ListView 添加 点击列表跳转到指定视图】

React Native 之 列表【ListView，NavigatorIOS】

React Native 之状态指示器【加载数据的状态等待】

React Native 之列表【ListView 添加点击列表跳转到指定视图】

React Native 之列表【ListView，NavigatorIOS】