Senasiko Reading time ~1 minute

日曜日

  • 骑士与魔法
  • 舞动青春

    月曜日

  • Princess Principal *
  • 天使的3p

    火曜日

  • 异世界食堂
  • 单蠢女孩
  • 徒然喜欢你
  • 带着手机闯荡异世界 *
  • new game

    水曜日

  • 捏造陷阱

    木曜日

  • 欢迎来到实力至上主义教室

    金曜日

  • 来自深渊 *

    土曜日

  • FA
  • re:creators
Senasiko Reading time ~1 minute

解决过程

  1. 去掉navigation
    成功传递state和action

  2. 添加combineReducers，只添加视图的reducer，看是否是combineReducers的问题 
    1
2
3
4
5
6
7
8
9

    import Home from './modules/home/views/Home'
// 合并所有的reducer
const reducer = combineReducers({
 home: home.reducer
});
// 连接redux和组件
const StoreApp = connect(mapStateToProps, mapActionToProps)(Home);
// 生成store
const store = applyMiddleware(thunk)(createStore)(reducer);

    成功传递state

  3. 添加navigation的reducer，看是否是这个的问题 ```js //注册路由reducer export const stackReducer = (state,action) => { const newState = StackRouter.router.getStateForAction(action, state); return newState || state; };

// 合并所有的reducer const reducer = combineReducers({ router: stackReducer, home: home.reducer });

1
2
3
4
5
6
7
8
9

没问题，router的数据也有取到       
4. 添加bindActionCreators
```js
// 合并所有的action到props
const mapActionToProps = (dispatch) => {
    return {
        homeaction: bindActionCreators(home.actions, dispatch)
    }
};

木有问题，action成功传递到，正常使用

  1. 把connect()(Home)改为connect()(StackRouter)，看是否是路由视图影响 
    1
2
3
4
5
6
7
8
9
10
11
12

    //建立路由组件
class RouterApp extends Component{
 constructor(props){
     super(props)
 }
 render(){
     return(
         <StackRouter/>
     )
 }
}
const StoreApp = connect(mapStateToProps, mapActionToProps)(Home);

    state和action都没有传递，确定是路由组件的问题

  2. 修改路由组件，查找失败原因
  3. 找了一天半找不到原因，去提问吧_(:зゝ∠)_
    解决问题 stackoverflow

    原因解释

    该问题是因为navigation组件的加入导致store的数据无法向下传递。在navigation加入之前仅需把根组件和store connect就好，但是加入之后就不行了。
    解决办法有两个：
    1) 把store加入screenProps

1
2
3

<StackRouter navigation={addNavigationHelpers({
                 state: this.props.router
             })} screenProps = {this.props}/>

但是这种办法会把整个state都传递给所有的子组件
2) 给每个组件connect
在子组件的view.js里导出connect后的组件

1
2
3
4
5
6
7
8
9

export default connect(
    (state) => ({
        home: state.home
    }),
    (dispatch) => ({
        actions: bindActionCreators(actions, dispatch)
    })
)(Home);

ps: redux 中 connect之后的也是一个组件，这个没理解好导致问题没有很快解决

Senasiko Reading time ~1 minute

按照 react-native中文文档 起步

样式

  • 建议使用 StyleSheet.create 来集中定义组件的样式 
    1
2
3
4
5
6
7
8
9
10

    const styles = StyleSheet.create({
bigblue: {
  color: 'blue',
  fontWeight: 'bold',
  fontSize: 30,
},
red: {
  color: 'red',
},
});

标签

  • <FlastList> 中 renderItem 属性函数内部 this 指向 window ，所以要使用 this 请在 return 里使用
  • <FlastList> 的父元素必须设置 {flex: 1} 必须设置 {flex: 1} 必须设置 {flex: 1}

资源

  • require中的图片名字必须是一个静态字符串（不能使用变量！因为require是在编译时期执行，而非运行时期执行！）。
  • 如果你需要动态缩放图片（例如，通过flex），你可能必须手动在style属性设置{ width: undefined, height: undefined }。
  • 视频必须指定尺寸而不能使用flex样式。
  • 边框圆角样式目前在iOS的图片组件上还不支持。

杂记

  • 在iOS上使用http链接的图片地址可能不会显示，参见这篇说明修改。
  • 可以使用应用内的开发者菜单中的“FPS Monitor”工具来监控应用的帧率。
  • android studio sdk配置必须6.0
  • react 中 条件渲染可以这样写 {isTrue && <div></div>}
  • react 给子元素传组件 <Child div={<div />}/>

常用网站

Senasiko Reading time ~1 minute

1. 开发环境

目前官方提供的工具为 weex-toolkit 按照文档即可完成环境搭建。
另一个可以用的开发环境 weex-hackernews

2. 开发过程

  • 官方提供的标签过少。
  • 不支持 z-index。
  • <div> 不支持 overflow-y。
  • <slide> 轮播图标签中 <indicator> 指示器点的样式没有成功修改过。
  • <transition> 标签在多个试图切换过程中会出现混乱的情况(是 weex 的问题还是 vue 的问题待调查)。
  • 调用 android 和 ios 系统功能的 api 几乎没有。大部分都要通过自己封装原生的代码来实现功能。

    3. 多终端调试及编译

  • web 可以实现正常的调试，并且有 vue-devtools 工具来方便调试。
  • native 端只能用 weex-toolkit 进行单页调试，无法调试整个应用。
  • 集成 Devtools 到 Android 也没成功。
  • 各终端的兼容性不好，在 web 端正常显示的程序编译后往往会出现兼容性问题，且因为无法调试整个系统导致修改起来极其麻烦。
  • weex-toolkit 可以直接通过命令行编译生成 apk 等 native 文件。

    4. 社区

    官方文档真的太少、太简单了。
    github相关源码的issue也很少。 —–

    ps: 关于weex的一些issue汇总