react-router V4 踩坑

发表于 2017-08-01

The prop `history` is marked as required in `Router` …

The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

解决办法:

出现这个报错是因为我用npm 安装的是react-router v4，react-router v4不再使用<Router history={hashHistory}> 这种方式定义history 实现类型。而是直接通过组件如BrowserRouter,HashRouter等

import {Router, Route, hashHistory} from 'react-router';
<Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>
===>
import {BrowserRouter as Router, Route} from 'react-router-dom';
<Router>
  <Route path="/" component={Main}></Route>
</Router>
或者
<HashRouter>
  <Route path="/" component={Main}></Route>
</HashRouter>

A ‘Router’ may have only one child element

react-router v4 在下面只能放一个层级，类似与react 中render 不能有两个平级div一样

解决办法：

用div 或者Switch 包裹所有Route

<Router>
  <div>
    <Route component={ComponentHeader}></Route>
    <Switch>
      <Route component={ComponentFooter} path='/footer/:id'></Route>
    </Switch>
  </div>
</Router>

webpack 配置问题

v4 中引入<BrowserRouter> 组件, 而BrowserRouter使用的是HTML5 的history api, 在使用webpack-dev-server时会遇到

GET http://localhost:8080/xxx/xxx 404 (Not Found)

解决办法：

webpack.config.js中加入

devServer: {
  apiHistoryFallback: true,
}
output: {
  ...,
  publicPath: '/',
}

然后将index.html中的bundle.js改为/bundle.js

1	<script src='bundle.js'></script> ===> <script src='/bundle.js'></script>

参考：https://stackoverflow.com/questions/43209666/react-router-v4-cannot-get-url

阅读全文 »

webpack css-modules 和global css 共存

发表于 2017-07-30

在使用ant design 时候遇到ant design css 和自定义的css 冲突的问题。
./node_modules/ 中ant desing 的css 文件作为全局的css 和自定义的css_modules 会发生冲突。解决办法是将/node_modules/中的css与自定义的css 分开处理。即对css_modules使用exclude:/node_modules/，对node_modules中的css使用include:path.resolve(__dirname,'node_modules')

最开始定义的webpack.config.js 的处理方式：

var webpack = require('webpack');
var path = require('path');
module.exports = {
  context: __dirname+'/src',
  entry: "./js/index.js",
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react','es2015'],
            // ant design  babel-plugin-import
            plugins: [['import',{'libraryName':'antd','style':'css'}]]
          }
        }
      },
      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [
          {loader:'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true,
              loacalIdentName: '[name]__[local]_[hash:base64:5]',
              sourceMap: true,
              importLoaders: 1
            }
          }
        ]
      },  
    ]
  },
  output: {
    path: __dirname+'/src',
    filename: 'bundle.js'
  }
}

报错：

ERROR in ./node_modules/antd/lib/button/style/index.css
Module parse failed: /home/johnny/Project/react/demo3/node_modules/antd/lib/button/style/index.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

找到解决办法是，分别处理node_modules(ant design)中的css和css_modules：

var webpack = require('webpack');
var path = require('path');
module.exports = {
  context: __dirname+'/src',
  entry: "./js/index.js",
  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react','es2015'],
            plugins: [['import',{'libraryName':'antd','style':'css'}]]
          }
        }
      },
      // css_modules 处理方式
      {
        test: /\.css$/,
        exclude: /(node_modules)/,
        use: [
          {loader:'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true,
              loacalIdentName: '[name]__[local]_[hash:base64:5]',
              sourceMap: true,
              importLoaders: 1
            }
          }
        ]
      },
      // ant design 处理方式
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'node_modules'),
        use: [
          {loader:'style-loader'},
          {
            loader:'css-loader',
          }
        ]
      },
    ]
  },
  output: {
    path: __dirname+'/src',
    filename: 'bundle.js'
  }
}

react-native学习日记之ListView二

发表于 2017-02-08

用listView实现九宫格效果

这次时照着es6的写法写的，es6和es5的写法有很多地方不一样

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableOpacity,
  Image
} from 'react-native';
import Dimensions from 'Dimensions';
const listData = [
  {
    src:'a', desc:'第一张'
  },
  {
    src:'b', desc:'第二张'
  },
  {
    src:'c', desc:'第三张'
  },
  {
    src:'d', desc:'第四张'
  },
  {
    src:'e', desc:'第五张'
  },
  {
    src:'b', desc:'第二张'
  },
  {
    src:'c', desc:'第三张'
  },
  {
    src:'d', desc:'第四张'
  },
  {
    src:'e', desc:'第五张'
  }
];
// 获取屏幕宽高
var {width,height} = Dimensions.get('window');
var cols = 3; //3列
var cellWidth = 100,cellHeight = 100;
var vMargin = (width-cols*cellWidth)/(cols+1); //九宫格横向margin算法
var hMargin = 20; //九宫格纵向margin
export default class ListViewjiugongge extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    this.state = {
      dataSource: ds.cloneWithRows(listData)
    }
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        // renderSeparator={(sectionID,rowID,adjacentRowHighlighted)=>{
        //   console.log(sectionID,rowID,adjacentRowHighlighted);
        //   return(
        //     <View key={`${sectionID}-${rowID}`}
        //       style={{height:90,width:1,backgroundColor:adjacentRowHighlighted?'blue':'red'}}
        //       ></View>
        //   )
        // }}
        contentContainerStyle={styles.listViewStyle}
        />
    );
  }
  renderRow(owData,sectionID,rowID,highlightRow) {
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>{highlightRow(sectionID,rowID)}}>
        <View style={styles.cellViewStyle}>
          {/*图片src*/}
          <Image source={{uri:owData.src}} style={{width:100,height:100,borderRadius:50}}/>
        </View>
      </TouchableOpacity>
    )
  }
}
const styles = StyleSheet.create({
  listViewStyle: {
    flexDirection:'row',
    flexWrap:'wrap',
    alignItems:'flex-start'
  },
  cellViewStyle: {
    marginLeft:vMargin,
    marginTop: hMargin
  },
  descStyle: {
    // flexDirection:'row',
    // alignItems:'center'
  }
});
AppRegistry.registerComponent('ListViewjiugongge', () => ListViewjiugongge);

react-native学习日记之ListView

发表于 2017-02-08

react-native ListView DOC

ListView 基本用法

//es5 写法
var ListViewDemo = React.createClass({
  getInitialState() {
    // 设置初始值
    // 1.1 设置数据源
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    // 1.2 设置返回数据
    return {
      //listData 为一个数组格式
      dataSource: ds.cloneWithRows(listData)
    }
  },
  // 设置render函数
  render() {
    return (
      <ListView dataSource={this.state.dataSource}
        renderRow={this.renderListView}
        //this.renderListView后不加括号表示默认接受所有参数（owData，sectionID...)
        />
    );
  },
  renderListView(owData, sectionID, rowID, highlightRow) {
    //renderRow 回调函数
  }
}

//es6 写法
class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(listData),
    };
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderListView}
      />
    );
  }
}

阅读全文 »

react-native 学习日记之ScrollView

发表于 2017-02-07

使用ScrollView 实现轮播

效果还行

阅读全文 »