XFood
这是我业余时间，自学RN时写的一个app
先看下效果图：
同时能运行在android跟ios设备，开发起来也很快，主要用到的知识有：
- 自定义Button，titleBar，属性传值
- 界面跳转Navigator
- 菜谱列表ListView
- 详情页需要滚动，使用ScrollView
- 官方提供的Tabbar不能跨平台，第三方组件react-native-xtabbar的引入以及使用
- 详情页的布局列表技巧
- 方法调用，采用箭头表示法，没有使用Bind(this)
其他知识梳理：
- 给组件包装导航Navigator实现跳转
import Mainpager from './Mainpager';
export default class XFoodMain extends Component {
render() {
var defaultName = 'Mainpager';
var defaultComponent = Mainpager;
return (
<Navigator
initialRoute={
{
name:defaultName,component: defaultComponent,}
}
configureScene={
()=>{
return Navigator.SceneConfigs.HorizontalSwipeJump;
}
}
renderScene={
(route,navigator)=>{
let Com=route.component;
return <Com {...route.params} navigator={navigator} />;
}
}>
</Navigator>
);
}
说明：首先在XFoodMain这个类中想引入其他组件，就可以通过
import Mainpager from './Mainpager';的方式引入，其中'./XXX'
表示在同一级目录，如果是上一级就可以这样表示：'../XXX'; Navigator组件的使用也入上所示，重要方法有3个，分别是初始化路由initialRoute、配置跳转时的动画configureScene、还有最后一个非常重要的方法renderScene，需要
注意的是，在返回Component的同时需要携带两个参数过去，即route.params、navigator。前者是在界面的跳转的时候可以传递参数，后者是来控制界面跳转以及返回
- 这个界面只有一个按钮，点击进入Home主页
import Button from '../../widget/Button';
import AllKindsFood from '../allkindsFood/AllKindsFood';
export default class Mainpager extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
navigator: null,};
}
comeIn = () => {
if(this.state.navigator){
this.state.navigator.push({
name: 'AllKindsFood',component: AllKindsFood,params: {
title: 'wtf',name: 'hehda',},})
}
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
欢迎使用XFood
</Text>
<Button ref="button" text={"进入"} button_bg={"#1c4ef2"} onclick={this.comeIn}/>
</View>
);
}
componentDidMount() {
var {navigator} =this.props;
this.setState(
this.state = {
navigator: navigator,});
}
}
在XFoodMain中已经给Mainpager包装导航了，所以在这里就可以通过
var {navigator} =this.props;解构的方式拿到navigator，当点击按钮的时候，即可通过navigator push到下一个界面
在push的时候，可以携带以下参数，name、component、params。还有一点就是这里自定义的了按钮，并且给按钮自定义了一些属性，如text、button_bg、onclick方法等，在自定义的Button可以通过props拿到这些属性，即传入下去了
import TabBar from 'react-native-xtabbar';
import HomeFoodPager from './HomeFoodPager';
import TitleBar from '../../widget/TitleBar';
const Dimensions = require('Dimensions');
const {width} = Dimensions.get('window');
const {height} = Dimensions.get('window');
export default class AllKindsFood extends Component {
// 构造
constructor(props) {
super(props);
var {navigator,route}=this.props;
// 初始状态
this.state = {
navigator: navigator,};
}
render() {
press = (index) => {
};
back = () => {
var {navigator}=this.props;
if (navigator != null) {
navigator.pop();
}
};
return (
<View style={styles.container}>
<TitleBar title="XFood" leftTitle="上一级" title_bg="#1c4ef2"/>
<TabBar
style={styles.content}
onItemSelected={(index)=>press(index)}
>
<TabBar.Item
icon={require('../../image/home_normal.png')}
selectedIcon={require('../../image/home_pressed.png')}
title='首页'>
<HomeFoodPager navigator={this.state.navigator}/>
</TabBar.Item>
<TabBar.Item
icon={require('../../image/find_normal.png')}
selectedIcon={require('../../image/find_pressed.png')}
title='其他'>
<HomeFoodPager navigator={this.state.navigator}/>
</TabBar.Item>
</TabBar>
</View>
);
}
}
TitleBar也是自定义的，跟前面的Button类型，都是自定义一些属性；紧接着是Tabbar，我是引用用第三方的，因为RN原有的组件是不支持跨平台的，引用方式：npm install [第三方库] –save ，如npm install react-native-device-info –save；
然后查看README文档，即可知道如何使用。在点击TabBar的Item时，需要将之前的navigator对象最为属性传递下去
- 菜谱列表listview
import FoodDetail from './FoodDetial'; const Dimensions = require('Dimensions'); const {width} = Dimensions.get('window'); const {height} = Dimensions.get('window'); const foodJsonData = require('../data/foodData.json'); const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); const url = 'http://api.jisuapi.com/recipe/byclass?classid=2&start=0&num=10&appkey=019edfd7e2c45c72'; export default class HomeFoodPager extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = { dataSource: ds.cloneWithRows(foodJsonData.result.list),}; } render() { pressItem = (rowData) => { const {navigator}=this.props; console.log(rowData.name); if(navigator!=null){ navigator.push({ name:"FoodDetail",component:FoodDetail,params:{ rowData:rowData,} }) } }; renderRowData = (rowData,rowID) => { return <TouchableOpacity activeOpacity={0.5} onPress={()=>pressItem(rowData)} > <View style={styles.cellStyle}> <Image style={{width:100,height:100}} source={{uri: rowData.pic}}/> <View style={styles.rightStyle}> <Text style={{fontWeight:'bold'}} numberOfLines={1} > {rowData.name }</Text> <Text style={{width:0.7*width,textAlign: 'left',fontWeight:'normal',marginTop:10} } numberOfLines={3} > {rowData.content }</Text> </View> </View> </TouchableOpacity> }; return ( <ListView style={styles.container} dataSource={this.state.dataSource} renderRow={(rowData,rowID) => renderRowData(rowData,rowID)} /> ) } //获取网络数据 componentDidMount() { fetch(url).then((response) => response.json()) .then((responseJson) => { var jsonData = responseJson.result.list; console.log("数据大小：" +responseJson); this.setState( this.state = { dataSource: ds.cloneWithRows(jsonData),} ); }) .catch((error) => { console.error(error); }); } }
这个页面 主要是通过fetch请求网络数据，用listview展示数据列表，点击每个Item后将会传递rowData到详情页
- 菜谱详情页
const Dimensions = require('Dimensions'); const {width} = Dimensions.get('window'); export default class FoodDetial extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = { rowData: '',}; } render() { let data = this.state.rowData; console.log(data); return ( <View style={styles.container}> <TitleBar title="详情页" leftTitle="上一级" title_bg="#1c4ef2"/> <ScrollView> <View style={styles.foodCeil}> <Text style={{backgroundColor:'#f2c11e',color:'#fff',paddingTop:5,paddingBottom:5}}>菜肴名称</Text> <View style={styles.foodheader}> <Image style={styles.foodlogo} source={{uri:data.pic}} resizeMode={'stretch'}/> <Text style={{marginLeft:3}}>菜谱名称：{data.name}</Text> </View> <Text style={{backgroundColor:'#f2c11e',paddingBottom:5,marginTop:4}}>菜肴说明</Text> <Text style={{backgroundColor:'#fff',paddingBottom:5}}>类型：{data.tag}</Text> <Text style={{backgroundColor:'#f2c11e',marginTop:4}}>菜肴介绍</Text> <Text style={{backgroundColor:'#fff',paddingBottom:5}}>介绍：{data.content}</Text> <Text style={{backgroundColor:'#f2c11e',marginTop:4}}>菜肴准备</Text> <Text style={{backgroundColor:'#fff',paddingBottom:5}}>菜肴准备: {this.getData()}</Text> <Text style={{backgroundColor:'#f2c11e',marginTop:4}}>开始制作</Text> <View style={styles.step}> {this.getStep()} </View> </View> </ScrollView> </View> ) } getStep=()=>{ var contentView =[]; let data = this.state.rowData; if (data.process != null) { for(let i=0;i<data.process.length;i++){ contentView.push( <View key ={i} style={styles.foodheader}> <Image style={styles.foodlogo} source={{uri:data.process[i].pic}} resizeMode={'stretch'}/> <Text style={{marginLeft:3,width:width*0.6}} numberOfLines={3} >第{i+1}步：{data.process[i].pcontent}</Text> </View> ) } return contentView; } }; getData = () => { let data = this.state.rowData; if (data.material != null) { var s = ''; for (let i = 0; i < data.material.length; i++) { s += data.material[i].mname + "" + data.material[i].amount + ',\t'; } return s; } }; componentDidMount() { const {rowData}=this.props; console.log(rowData.name); this.setState(this.state = { rowData: rowData,}); } }
这个就是关于菜谱详情界面，可以看到我习惯于使用箭头函数，方法的创建都是
方法名=()=>{}这种方式，方法的引用可以()=>方法名(),括号中可以传入参数。这个界面其实有一个难点，就是每个菜谱的开始制作步骤数都不一样，可以看看getStep这个方法，我是通过创建一个数组，然后把每一个ceil都装进去，最后返回这个数组；还有getData()这个方法，注意这两者前面都加了一个不为null的判断，然后才取到数组的值
大概内容这么多，当然还有一些细节东西，比较适合初学者学习，喜欢的就下载看看吧！github
原文地址：https://www.jb51.cc/react/304890.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
