项目地址如下:https://github.com/FTD-ZF/ReactNativeMobxFrame

应该可以说的是,项目也只是一个花架子,不过底部的tab稍微改变了

我们一起来看代码

//index.js
//根入口是App.js
/**
* @format
*/ import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);

先来看看App.js

很惊讶,其实是有处理数据的用到了mobx

App.js中引用了下部的切换,这个 布局还是挺好玩的

//src/navigation.js
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Easing, Animated } from 'react-native';
import {
// TabNavigator,
StackNavigator,
createStackNavigator,
createBottomTabNavigator,
createAppContainer,
getActiveChildNavigationOptions,
// createMaterialTopTabNavigator,
} from 'react-navigation';
import { headerOptions, RouteConfigs, } from './commons/components/navConfig'; import { HomeTab, MineTab, DetailsView, CenterView } from './root';
import { AppColors, AppStyles } from './commons/styles/index';
import CustomTabComponent from './commons/components/Tab';
const TabBarText = {
home: '首页',
centertext: '新增',
persnalName: "我的",
} const TabNavigator = createBottomTabNavigator(
{
Home: { screen: HomeTab,
navigationOptions: props => {
return RouteConfigs({
imgSource: require('../src/assets/imgs/homeSelect.png'),
label: TabBarText.home,
props,
})
}, },
Center: {
screen: CenterView,
navigationOptions: props => {
return RouteConfigs({
imgSource: require('../src/assets/imgs/homeSelect.png'),
label: TabBarText.centertext,
props,
})
}, },
Mine: {
screen: MineTab,
navigationOptions: props => {
return RouteConfigs({
imgSource: require('../src/assets/imgs/homeSelect.png'),
label: TabBarText.persnalName,
props,
})
}, },
}, {
tabBarComponent: props => <CustomTabComponent {...props} />,
tabBarOptions: {
showIcon: true,
activeTintColor: AppColors.themecolor,
inactiveTintColor: '#979797',
labelStyle: {
fontSize: 12 // 文字大小
}
}
} ); //此处为每个tab页面可进行设置标题栏相关内容
TabNavigator.navigationOptions = ({ navigation, screenProps }) => {
const childOptions = getActiveChildNavigationOptions(navigation, screenProps)
return {
headerTitle: childOptions.headerTitle,
headerLeft: childOptions.headerLeft,
headerRight: childOptions.headerRight,
headerStyle: AppStyles.NavTopStyle,
headerTitleStyle: AppStyles.NavTopTitleStyle,
header: childOptions.header,
}
} const stackNavigators = createStackNavigator(
{
Root: {
screen: TabNavigator, },
DetailsView: {
screen: DetailsView,
navigationOptions: props => {
return headerOptions({
...props,
...{
back: true,
},
})
},
}
},
{
// // defaultNavigationOptions: ({ navigation }) => { // // return {
// // ...defaultHeaderOpts,
// // gesturesEnabled: true,
// // headerBackTitle: '',
// // // headerTitle: '',
// // headerBackImage: HeaderBackImage
// // };
// // },
initialRouteName: 'Root',
mode: 'card',
headerMode: "screen",
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const Width = layout.initWidth;
//沿X轴平移
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [Width, 0, -(Width - 10)],
});
//透明度
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateX }] };
}
}) }
); const AppContainer = createAppContainer(stackNavigators); export default AppContainer;

//src/pages/details.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
import { AppColors } from '../commons/styles'; export default class Index extends Component {
static navigationOptions = ({ navigation }) => {
return { headerTitle: navigation.state.params.headername,
// headerRight: (<Text>www</Text>),
// headerLeft: <Text>返回</Text>
} } // 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
} componentWillMount() { } _goBack() {
this.props.navigation.state.params.callback('你好!!!');
this.props.navigation.goBack();
} render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={{
backgroundColor: AppColors.themecolor,
margin: 20,
padding: 10,
}} onPress={() => this._goBack()}>
<Text style={{ color: 'white', textAlign: 'center' }}>
点击返回通知刷新
</Text>
</TouchableOpacity> </View>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//src/pages/home/index.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
SafeAreaView,
TextInput,
TouchableOpacity,
BackHandler
} from 'react-native'; import { AppStyles, AppColors } from '../../commons/styles';
import { Toast } from 'teaset';
// import testStore from '../../mobx/testStore';
import { observer, inject } from "mobx-react"; @inject('rootStore')
@observer
export default class Index extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle: '首页',
headerLeft: (
<TouchableOpacity onPress={() => { navigation.state.params.showToast() }}>
<Text>左边点击</Text>
</TouchableOpacity> ),
headerRight: (<View />) }); // 构造
constructor(props) {
super(props);
this.testStore = this.props.rootStore.testStore;
// 初始状态
this.state = {
content: '',
};
} componentWillMount() { this.props.navigation.setParams({
showToast: () => this._showToast(),
torefresh: (str) => this._toRefresh(str),
}); } componentDidMount() {
this.testStore.getListData();
} _showToast() {
Toast.message('看下效果');
} _todetails() {
this.props.navigation.navigate('DetailsView', {
headername: '详情',
callback: (str) => this.props.navigation.state.params.torefresh(str),
});
} _toRefresh(str) {
this.setState({
content: str,
});
} render() { return (
<View style={styles.container}> <TouchableOpacity
style={{
backgroundColor: AppColors.themecolor,
margin: 20,
padding: 10,
}} onPress={() => this._todetails()}>
<Text style={{ color: 'white', textAlign: 'center' }}>
点击进入详情
</Text>
</TouchableOpacity> <Text style={{ marginTop: 5 }}>
详情通知来了:{this.state.content}
</Text> <Text style={{ marginTop: 15 }}>
{this.testStore.listdata}
</Text>
</View>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
padding: 5,
backgroundColor: AppColors.dark9,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//src/pages/center/index.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
BackHandler,
} from 'react-native';
import { Toast } from 'teaset'; export default class Index extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle: "中心",
// header:null }) // 构造
constructor(props) {
super(props); this.state = { };
} componentWillMount() { } componentDidMount() { } render() {
return (
<View style={styles.container}>
<Text>
中间
</Text> </View>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}, });

时时当勉励,好好加油~

【水滴石穿】ReactNativeMobxFrame的更多相关文章

  1. iOS 开发笔记 -- 各种细枝末节的知识(水滴石穿)

    在此总结整理,遇到的各种的小问题: 1.通过从字典(数组)中取出的NSString的length==0 作为if的判断条件导致的carsh: 由于在字典中通过Key取出值之后直接做了length相关操 ...

  2. 【水滴石穿】react-native-book

    先推荐一个学习的地址:https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=12778558 ...

  3. 【水滴石穿】rnTest

    其实就是一个小的demo,不过代码分的挺精巧的 先放地址:https://github.com/linchengzzz/rnTest 来看看效果 确实没有什么可以说的,不过代码部分还行 先入口文件 / ...

  4. 【水滴石穿】rn_statusbar

    先放项目地址https://github.com/hezhii/rn_statusbar 来看一下效果 咩有感觉很怎么样,看代码 根入口文件 //index.js //看代码我们知道入口是app.js ...

  5. 【水滴石穿】react-native-ble-demo

    项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...

  6. 【水滴石穿】ReactNative-Redux-Thunk

    老实说,运行出来的项目让人失望,毕竟我想看各种有趣的demo啊- 先放上源码地址:https://github.com/ludejun/ReactNative-Redux-Thunk 我们来一起看看代 ...

  7. 【水滴石穿】mobx-todos

    我觉得代码在有些程序员手里,就好像是画笔,可以创造很多东西 不要觉得创意少就叫没有创意,每天进步一点点,世界更美好 首先源码地址为:https://github.com/byk04712/mobx-t ...

  8. 【水滴石穿】react-native-aze

    说个题外话,早上打开电脑的时候,电脑变成彩色的了,锅是我曾经安装的一个chrome扩展,没有经过我的同意开启了 (也许是昨天迷迷糊糊开启了) 上午运行项目都不成功,还以为被黑客攻击了---然后下午就排 ...

  9. 【水滴石穿】douban-movies-react-native

    这个项目的话,倒是可以做一个支架页面,就是你需要什么东西,你就可以在里面加,不过也是比较难的地方 就是数据流,数据处理的部分.react可以处理数据的方式很多,没有见过类似于古老的vue时候可以使用的 ...

随机推荐

  1. 网络结构解读之inception系列一:Network in Network

    网络结构解读之inception系列一:Network in Network   网上有很多的网络结构解读,之前也是看他人博客的介绍,但当自己看论文的时候,发现存在很多的细节和动机解读,而这部分能加深 ...

  2. 关于判断是安卓还是ios环境跳转下载页

    H5项目中判断是安卓还是iOS手机就跳转到不同的下载页,项目如下https://github.com/JserJser/dailyPush/tree/master/daily6/H5 这个项目里面我比 ...

  3. Python-可变类型与不可变类型

    可变类型 可以变化的,列表和字典 利用id()函数 查看内存地址 内存地址变化即不可变类型. 内存地址不变化即可变类型 不可变类型 不可以变化的,字符串和数字 字符串内置方法 索引取值 索引切片 成员 ...

  4. Hdu 2376

    题目链接 题意:给出一颗含有n个结点的树,树上每条边都有一个长度,求树上所有路径的平均长度. 考虑树上每条边对所有路径长度和的贡献,对于每条偶 就是边的两个短点u和v,只需要记录以u为根的子树的结点的 ...

  5. 深入浅出 Java Concurrency (2): 原子操作 part 1[转]

    从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...

  6. 转:linux驱动开发的经典书籍

    源地址:http://www.cnblogs.com/xmphoenix/archive/2012/03/27/2420044.html Linux驱动学习的最大困惑在于书籍的缺乏,市面上最常见的书为 ...

  7. 结构体的sort排序

    结构体用sort快排的方法 struct node{ int k,s; }p[]; bool cmp1(node x,node y){ return x.s>y.s; //定义降序排序(从大到小 ...

  8. PAT甲级——A1046 Shortest Distance

    The task is really simple: given N exits on a highway which forms a simple cycle, you are supposed t ...

  9. Spring Boot实战系列(7)集成Consul配置中心

    本篇主要介绍了 Spring Boot 如何与 Consul 进行集成,Consul 只是服务注册的一种实现,还有其它的例如 Zookeeper.Etcd 等,服务注册发现在微服务架构中扮演这一个重要 ...

  10. Python学习 备注(2)

    由于python下许多框架都是在python2下的,python3向下不兼容 需安装python2 安装好后,使用pip安装python下的框架scrapy 总是报错,最后发现是包管理器,pip的版本 ...