• 最近学习了下D3和仿照别人的案例写了个小demo,遇到了一些问题,在这里记录下: 1.遇到的一些坑: (1.)D3.js中V3和V4的版本差别很大,所以一定要注意版本; (2.)引用D3.js的js库文件的时候,应该通过npm安装库依赖,...

    最近学习了下D3和仿照别人的案例写了个小demo,遇到了一些问题,在这里记录下:
    1.遇到的一些坑:
    (1.)D3.js中V3和V4的版本差别很大,所以一定要注意版本;
    (2.)引用D3.js的js库文件的时候,应该通过npm安装库依赖,虽然D3.js不咋出名,但是npm还是可以安装它,安装命令是:
    npm安装:npm install d3
    前端导入:import * as d3 from 'd3';

    (3.)react中css的解析和导入:
    一:如果是通过create-react-app创建的项目,可以直接通过命令:

    import './styles.css';

    导入,可以参考蚂蚁金服的样式导入和操作;
    二:非create-react-app项目,可以参考文章:
    http://echizen.github.io/tech/2017/03-09-css-in-react
    2.demo的源码:
    animSVG.js

    
    import React, { Component } from 'react';
    import * as SimulationData from './svgData';
    import * as d3 from 'd3';
    import './styles.css';
    //需要注意的问题:v3和v4版本差别很大,需要高度注意;
    class AnimSVG extends React.Component {
    
        render() {
            {/* 定义柱状图的颜色数组; */ }
            const colors = ["#39D1DE", "#1CDB62", "#1FE015", "#A7E51F", "#E3E312", "#EA6A1F", "#29A0E3"];
            {/* 画布大小 */ }
            var width = 400;
            var height = 400;
    
            {/* 在 body 里添加一个 SVG 画布 */ }
            var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
    
            {/* 画布周边的空白 */ }
            var padding = { left: 30, right: 30, top: 20, bottom: 20 };
    
            {/* 定义一个数组 */ }
            var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
    
            {/* x轴的比例尺 */ }
            var xScale = d3.scale.ordinal()
                .domain(d3.range(dataset.length))
                .rangeRoundBands([0, width - padding.left - padding.right]);
    
            {/* y轴的比例尺 */ }
            var yScale = d3.scale.linear()
                .domain([0, d3.max(dataset)])
                .range([height - padding.top - padding.bottom, 0]);
    
            {/* 定义x轴 */ }
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");
    
            {/* 定义y轴 */ }
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
    
            {/* 矩形之间的空白间距的宽度; */ }
            var rectPadding = 4;
    
            //添加矩形元素
            var rects = svg.selectAll(".MyRect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class", "MyRect")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function (d, i) {
                    return xScale(i) + rectPadding / 2;
                })
                .attr("width", xScale.rangeBand() - rectPadding)
                .attr("y", function (d) {
                    var min = yScale.domain()[0];
                    return yScale(min);
                })
                .attr("height", function (d) {
                    return 0;
                })
                .transition()
                .delay(function (d, i) {
                    return i * 200;
                })
                .duration(2000)
                .ease("bounce")
                .style("fill", function (uselsssVO, index) {
                    var currentColorIndex = index % (colors.length);
                    return colors[currentColorIndex];
                })
                .attr("y", function (d) {
                    return yScale(d);
                })
                .attr("height", function (d) {
                    return height - padding.top - padding.bottom - yScale(d);
                });
    
            {/* 添加文字元素 */ }
            var texts = svg.selectAll(".MyText")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "MyText")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function (d, i) {
                    return xScale(i) + rectPadding / 2;
                })
                .attr("dx", function () {
                    return (xScale.rangeBand() - rectPadding) / 2;
                })
                .attr("dy", function (d) {
                    return 20;
                })
                .text(function (d) {
                    return d;
                })
                .attr("y", function (d) {
                    var min = yScale.domain()[0];
                    return yScale(min);
                })
                .transition()
                .delay(function (d, i) {
                    return i * 200;
                })
                .duration(2000)
                .ease("bounce")
                .attr("y", function (d) {
                    return yScale(d);
                });
    
            {/* 添加x轴 */ }
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
                .call(xAxis); 
    
            {/* 添加y轴 */ }
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
                .call(yAxis);
    
            return (
                <svg xmlns="http://www.w3.org/2000/svg"></svg>
            );
        }
    }
    
    export default AnimSVG;
    

    styles.css

    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
    
    .MyRect {
        fill: steelblue;
    }
    
    .MyText {
        fill: white;
        text-anchor: middle;
    }

    3.demo的效果:
    这里写图片描述

    展开全文
  • React Native学习心得

    2019-04-15 18:24:37
    结合网址进行学习:https://reactnative.cn/ 讨论社区:https://www.facebook.com/groups/react.native.community React Native - 调试技巧及调试菜单说明(模拟器调试、真机调试):...

    一、配置环境

    • mac安装环境

    可以根据书12页进行参考,也可以根据网站https://reactnative.cn/docs/getting-started.html,主要还是参考网站配置环境

    1.安装完node之后检查电脑是否安装node

    通过cd,返回到最根目录,然后如下操作

    node -v

    mac电脑

    2.安装npm

    npm install -g react-native-cli

    安装完node之后设置下npm镜像

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    3.安装yarn

    brew install yarn

    4.mac电脑安装xcode

    按照网站指示下载安装xcode

    启动xcode之后,按照下图点击

    mac安装完成

    • windows安装环境

    可以根据书12页进行参考,也可以根据网站https://reactnative.cn/docs/getting-started.html,主要还是参考网站配置环境

    windows下可以参考https://blog.csdn.net/zeping891103/article/details/85769957

    1.安装完node之后检查电脑是否安装node

    通过cd,返回到最根目录,然后如下操作

    node -v

    windows电脑

    2.安装npm

    npm install -g yarn
    npm install -g yarn react-native-cli

    安装完node之后设置下npm镜像

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    3.安装Python2

    下载网址:https://www.python.org/downloads/

    选择合适的版本点击下载

    点击下载后跳到如下新页面,再次点击适合自己的电脑版本,即可下载成功,按照指示安装即可

     

    4.检查安装的java版本( JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)

    java -version

    • mac创建新项目

    1.创建时遇见如下问题:

    报上面那个错误,说明在安装过程中,某个命令行工具没有安装成功,依次检查一下

    最后发现是react-native-cli没有安装成功

    2.创建新项目

    一直没有创建成功,说明环境没有配置好,由于mac电脑在安装完xcode之后,ios环境也随之安装好了。目前需要安装andriod环境

    配置 ANDROID_HOME 环境变量时,在终端下使用vi ~/.bash_profile命令创建或编辑

    创建成功后将

    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    export PATH=$PATH:$ANDROID_HOME/emulator

    复制进去,然后输入:wq,将.bash_profile文件进行的编辑操作进行保存后退出。如果路径不同,则将刚刚复制的第一行代码修改一下路径即可

    在官网中将目标平台修改为andriod,按照提示进行操作

    • 在ios上运行
    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-ios

    运行后,出现报错:

    解决办法:https://www.crifan.com/react_native_ios_run_again_error_no_bundle_url_present/

    暂时取消全局网络代理,改为自动模式即可。或者将自动模式关闭一下,退出当前模拟器,退出终端,运行成功后,再打开自动模式即可解决

    成功运行后,界面上跳出一个手机的模型,页面显示内容

    页面停留一会后,自动跳转到页面

    终于把ios开发配置好了,开森一下下

    • 在andriod上运行

    1.创建一个虚拟设备

    首先打开安装的 Android Studio,用它打开我们上面创建的AwesomeProject下面的-"android"目录(下面会出现报错,需要"Android SDK Build-Tools"选项,mac电脑确保选中了 React Native 所必须的28.0.3版本)

    (下面会出现报错,需要"Android SDK Build-Tools"选项,windows确保选中了 React Native 所必须的27.0.3版本)

    点击上面的按钮后,弹出新的窗口

    创建需要的手机型号,然后

    cd AwesomeProject
    react-native run-android

    出现如下问题,下面提示是java version安装版本的问题

    React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)

    ls /Library/Java/JavaVirtualMachines/

    即可查看你电脑中装了哪些jdk版本。卸载不合适的jdk版本

    sudo rm -rf /Library/Java/JavaVirtualMachines/你需要卸载的版本号.jdk

    运行后首先跳出界面

    几秒之后自动跳转

    到此,andriod的环境配置成功。小小开心一下下。

    • windows上配置andriod环境遇到的问题

    问题1:

    解决方案,看链接https://stackoverflow.com/questions/47739777/android-studio-avd-emulator-process-finished-with-exit-code-1/47739865

    打开sdk management ,然后Unistal and install the Android Emulator

    问题2:

    运行之后,不报错,但是页面没有跳转出来:

    更新了一下Android Studio这个软件就解决了

    二、应用

    • 小demo

    执行react-native init nativeProject创建react-native项目

    然后将整个项目拖入到vscode(根据个人喜好决定,本人比较习惯vscode)找到App.js,并进行简单的修改

    import React, { Component } from 'react';
    import { Text, View, Image } from 'react-native';
    const styles = {
      text:{
        color:'blue',
        fontWeight:'bold',
        fontSize:30
      },
      view:{
        alignItems:'center',
        border:'1px solid red',
        marginTop:50
      }
    }
    class Greeting extends Component {
      constructor(props){
        super(props);
        this.state={isShowingText:true};
        setInterval(() => {
          this.setState(()=>{
            return {isShowingText:!this.state.isShowingText}
          })
        }, 1000);
      }
      render() {
        if(!this.state.isShowingText){
          return null;
        }
        return (
          <View style={{alignItems: 'center'}}>
            <Text style={styles.text}>Hello {this.props.name}!</Text>
          </View>
        );
      }
    }
    class App extends Component {
      render() {
        let pic = {
          uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <View style={styles.view}>
              <Image source={pic} style={{width: 193, height: 110}} />
              <Greeting name='Rexxar' />
              <Greeting name='Jaina' />
              <Greeting name='Valeera' />
            </View>
        );
      }
    }
    export default App

    修改之后,在vscode中保存,然后react-native run-ios或者react-native run-android,在ios或者andriod中运行项目。

    react-native run-ios
    react-native run-android

    进行其他修改操作后,点击手机模拟器,分别进行页面刷新,不同手机刷新方法如下:

      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
      android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',

    如左图所示,小demo已经完成。

    • demo2:使用Flexbox布局,处理文本输入,处理触摸事件

    import React, { Component } from 'react';
    import { Platform, Button, Text, View, TextInput, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback } from 'react-native';
    const styles = {
      container: {
        flex: 2,
        justifyContent: 'center',
        padding: 60,
        alignItems: 'center'
      },
      button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
      },
      buttonText: {
        padding: 20,
        color: 'white'
      }
    }
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { text: '' }
      }
      _onPressButton() {
        alert('You tapped the button!')
      }
      _onLongPressButton() {
        alert('You long-pressed the button!')
      }
      render() {
        return (
          <View style={{ flex: 1, flexDirection: 'column' }}>
            <View style={{ flex: 1, backgroundColor: 'powderblue', marginTop: 50 }} >
              <TextInput style={{ height: 40 }} placeholder="TextInput" onChangeText={(text) => this.setState({ text })} />
              <Text style={{ padding: 10, fontSize: 42 }}>
                {this.state.text.split(' ').map((word) => word && '?').join(' ')}
              </Text>
            </View>
            <View style={styles.container} >
              <Button onPress={this._onPressButton}
                title="click me" color="#841584"
              />
              <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                <View style={styles.button}>
                  <Text style={styles.buttonText}>TouchableHighlight</Text>
                </View>
              </TouchableHighlight>
              <TouchableOpacity onPress={this._onPressButton}>
                <View style={styles.button}>
                  <Text style={styles.buttonText}>TouchableOpacity</Text>
                </View>
              </TouchableOpacity>
              {Platform.OS === "android" ?
                <TouchableNativeFeedback
                  onPress={this._onPressButton}
                  background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                  <View style={styles.button}>
                    <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                  </View>
                </TouchableNativeFeedback> : <View><Text>当前是iOS系统</Text></View>
              }
              <TouchableWithoutFeedback
                onPress={this._onPressButton}
              >
                <View style={styles.button}>
                  <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
                <View style={styles.button}>
                  <Text style={styles.buttonText}>Touchable with Long Press</Text>
                </View>
              </TouchableHighlight>
            </View>
            <View style={{ flex: 1, backgroundColor: 'steelblue' }} ></View>
          </View>
        );
      }
    }
    export default App
    • demo3:使用滚动视图

    利用<ScrollView>标签实现滚动视图

    import React, { Component } from 'react';
    import { ScrollView, Image, Text } from 'react-native';
    class App extends Component {
      render() {
        return (
          <ScrollView>
            <Text style={{ fontSize: 196 }}>Scroll me plz</Text>
            <Image source={{ uri: "https://facebook.github.io/react-native/img/favicon.png", width: 64, height: 64 }} />
          </ScrollView>
        );
      }
    }
    export default App
    • demo4:使用长列表

    FlatList更适于长列表数据,且元素个数可以增删。必须的两个属性是data和renderItem。data是列表的数据源,而renderItem则从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染。

    import React, { Component } from 'react';
    import { FlatList, View, Text } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        paddintTop: 22
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
    }
    class App extends Component {
      render() {
        return (
          <View style={styles.container}>
            <FlatList data={[
              { key: 'name1' },
              { key: 'name2' },
              { key: 'name3' },
              { key: 'name4' },
              { key: 'name5' },
              { key: 'name6' },
              { key: 'name7' },
            ]}
              renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
            />
          </View>
        );
      }
    }
    export default App

    如果要渲染的是一组需要分组的数据,也许还带有分组标签的,那么SectionList将是个不错的选择

    import React, { Component } from 'react';
    import { SectionList, View, Text } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        paddintTop: 22
      },
      sectionHeader: {
        paddingTop: 120,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)'
      },
      item: {
        padding: 10,
        fontSize: 18,
        height: 44,
      },
    }
    class App extends Component {
      render() {
        return (
          <View style={styles.container}>
            <SectionList sections={[
              { title: 'A', data: ['name1'] },
              { title: 'B', data: ['name2', 'name3', 'name4', 'name5', 'name6', 'name7'] },
            ]}
              renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
              renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}
              keyExtractor={(item, index) => index}
            />
          </View>
        );
      }
    }
    export default App
    • demo5示例教程:电影列表

    import React, { Component } from 'react';
    import { Image, View, Text, FlatList } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      },
      thumbnail: {
        width: 53,
        height: 81
      },
      rightContainer: {
        flex:1,
      },
      title:{
        fontSize:20,
        marginBottom:8,
        textAlign:'center'
      },
      year:{
        textAlign:'center'
      },
      list:{
        paddingTop:20,
        backgroundColor:'#F5FCFF'
      }
    }
    const MOVIES_DATA = [
      {
        title: '标题1',
        year: '2015',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '标题2',
        year: '2015',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '标题3',
        year: '2015',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '标题4',
        year: '2015',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      }
    ]
    class App extends Component {
      render() {
        return (
          <FlatList data={MOVIES_DATA} 
          renderItem={this.renderMovie}
          style={styles.list}
          // keyExtractor={item=>item.id}
          keyExtractor={(item, index) => index.toString()}
           />
        );
      }
      renderMovie({item}){
        return(
          <View style={styles.container}>
            <Image source={{ uri: item.posters.thumbnail }} style={styles.thumbnail} />
            <View style={styles.rightContainer}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.year}>{item.year}</Text>
            </View>
          </View>
        )
      }
    }
    export default App
    • React Native调试:

    首先通过链接http://www.hangge.com/blog/cache/detail_1480.html学习到各个调试技巧,本人最喜欢的调试方法是(mac电脑):

    1.先在手机模拟器端command + D,弹出调试菜单

    2.调试菜单中,选择Debug JS Remotely

    3.选择后,React Native 会启动 Chrome 浏览器,并且打开一个 http://localhost:8081/debugger-ui 的新标签。

    4.command+option+i,打开Chrome的开发者工具进行调试

    • demo6判断当前是ios还是andriod

    ios                                          andriod       

    import React, { Component } from 'react';
    import { Platform, View, Text } from 'react-native';
    const styles={
      container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        ...Platform.select({
          ios:{
            backgroundColor:'yellow'
          },
          android: {
            backgroundColor: "blue"
          }
        })
      },
      textstyle:{
        color:'red',
        fontSize:26,
        fontWeight:'bold'
      },
    }
    class App extends Component {
      render() {
        const iosVersion = parseInt(Platform.Version,10);
        console.log('iosVersion',typeof iosVersion)
        console.log('iosVersion',iosVersion)
        return (
          <View style={styles.container}>
              <Text style={styles.textstyle}>{Platform.OS==='ios'?'ios':'android'}</Text>
              <Text style={styles.textstyle}>{Platform.Version>=25?'android':'null'}</Text>
              <Text style={styles.textstyle}>{iosVersion<25?'ios':'null'}</Text>
          </View>
        );
      }
    }
    export default App

    综上所述:通过Platform.OS来判断当前平台是最简单的

    • demo7图片
            <Image source={require("../img/preview.jpg")}></Image>
            <Image source={{uri:'https://facebook.github.io/react/logo-og.png'}} style={{width:100,height:100}}></Image>
    • demo8
    import React, { Component } from 'react';
    import { View, Text, Animated, Image } from 'react-native';
    class Home extends Component {
      static navigationOptions = {
        // 设置 title
        title: "首页"
      };
      state = {
        fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
      }
      componentDidMount() {
        Animated.timing(                  // 随时间变化而执行动画
          this.state.fadeAnim,            // 动画中的变量值
          {
            toValue: 1,                   // 透明度最终变为1,即完全不透明
            duration: 10000,              // 让动画持续一段时间
          }
        ).start();                        // 开始执行动画
      }
      render() {
        let { fadeAnim } = this.state;
        return (
          <Animated.View                 // 使用专门的可动画化的View组件
            style={{
              ...this.props.style,
              opacity: fadeAnim,         // 将透明度指定为动画变量值
            }}
          >
            {this.props.children}
          </Animated.View>
        );
      }
    }
    // 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
    class App extends React.Component {
      render() {
        return (
          <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
              <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
            </FadeInView>
          </View>
        )
      }
    }
    export default Home
    
    • demo9动画

    App.js

    import React, { Component } from 'react';
    import { View, Text, Animated } from 'react-native';
    class FadeInView extends Component {
      state={
        fadeAnim:new Animated.Value(0),//透明度初始值设为0
      }
      componentDidMount(){
        Animated.timing(
          this.state.fadeAnim,
          {
            toValue:1,
            duration:10000,
          }
        ).start();
      }
      render() {
        return (
          <Animated.View style={{...this.props.style,opacity:this.state.fadeAnim,}}>{this.props.children}</Animated.View>
        );
      }
    }
    class Home extends Component {
      render() {
        return (
          <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
          <FadeInView style={{width:250,height:50,backgroundColor:'blue'}}>
            <Text style={{fontSize:28,textAlign:'center',margin:10}}>Fadding in</Text>
          </FadeInView>
          </View>
        );
      }
    }
    export default Home
    

     

    • demo10   Picker, Switch, TextInput, Modal使用
    import React, { Component } from 'react';
    import { View, Text, Picker, Switch, TextInput, Modal, TouchableHighlight } from 'react-native';
    class Home extends Component {
      constructor(props) {
        super(props);
        this.state = {
          language: this.props.defaultVal,
          swicthValue1: true,
          swicthValue2: false,
          text: 'TextInput组件',
          modalVisible: false
        }
      }
      _switch1 = () => {
        return (
          <Switch style={{ marginTop: 20 }}
            trackColor={'#aaaa11'}
            value={this.state.swicthValue1}
            onValueChange={(value) => {
              //当开关状态改变了,一定要修改value的值,不然最终无法改变状态
              console.log('onValueChange1 =' + value);
              this.setState({
                swicthValue1: value
              })
            }}
            testID={'one'}
            thumbColor={'#ff1111'} />
        )
      };
      _switch2 = () => {
        return (
          <Switch style={{ marginTop: 20 }}
            trackColor={'#aaaaff'}
            value={this.state.swicthValue2}
            onValueChange={(value) => {
              //当开关状态改变了,一定要修改value的值,不然最终无法改变状态
              console.log('onValueChange2 =' + value);
              this.setState({
                swicthValue2: value
              })
            }}
            testID={'two'}
            thumbColor={'#11ff11'} />
        )
      };
      _switch3 = () => {
        return (
          <Switch trackColor={'#aafaff'}
            value={this.state.swicthValue2}
            onValueChange={(value) => {
              //当开关状态改变了,一定要修改value的值,不然最终无法改变状态
              console.log('onValueChange2 =' + value);
              this.setState({
                swicthValue2: value
              })
            }}
            testID={'two'}
            thumbColor={'#f1ff11'}
            disabled={true} />
        )
      };
      setModalVisible(visible) {
        this.setState({ modalVisible: visible });
      }
      render() {
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Picker
              selectedValue={this.state.language}
              style={{ height: 50, width: 100 }}
              onValueChange={(itemValue) => this.setState({ language: itemValue })}>
              <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" />
            </Picker>
            <View style={{ marginTop: 140, width: 340, height: 200, backgroundColor: '#ffffff', borderRadius: 5, alignItems: 'center' }}>
              {this._switch1()}
              {this._switch2()}
              <Text style={{ marginTop: 20, textAlign: 'center' }}>下面的switch设置disabled为true,无法点击,但是可以设置value的值来改变状态</Text>
              {this._switch3()}
            </View>
            <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
              onChangeText={(text) => this.setState({ text })} value={this.state.text} />
            <View style={{ marginTop: 20 }}>
              <Modal animationType="slide" transparent={false}
                visible={this.state.modalVisible}
                onRequestClose={() => { alert("Modal has been closed."); }}>
                <View style={{ marginTop: 120,alignItems:'center' }}>
                  <View>
                    <Text>学习modal使用!</Text>
                    <TouchableHighlight
                      onPress={() => { this.setModalVisible(!this.state.modalVisible);}}>
                      <Text>Hide Modal</Text>
                    </TouchableHighlight>
                  </View>
                </View>
              </Modal>
              <TouchableHighlight onPress={() => { this.setModalVisible(true);}}>
                <Text>Show Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        );
      }
    }
    export default Home
    
    • HTML元素与React Native组件对比
    HTML React Native
    div View
    img Image
    span,p Text
    li,ol ListView

    输入框组件:TextInput

    滚动窗口组件:ScrollView
     

    • demo11模仿微信

    文件结构图、页面效果图

     

    App.js

    import React, { Component } from 'react';
    import Route from './src/config/route'
    class App extends Component {
      render() {
        return (
          <Route />
        );
      }
    }
    export default App
    

    route.js

    import { createBottomTabNavigator, createStackNavigator, createAppContainer } from "react-navigation";
    import React from 'react';
    // 引入页面组件
    import Home from '../screens/home/Home'
    import Details from '../screens/Details'
    import Tabnavigation1 from '../screens/tab1/Tabnavigation1'
    import Tabnavigation2 from '../screens/tab2/Tabnavigation2'
    import Tabnavigation3 from '../screens/tab3/Tabnavigation3'
    import Ionicons from 'react-native-vector-icons/Ionicons';
    // 配置路由
    const HomeStack = createStackNavigator({
      Home: Home,
      Details: Details
    },
      {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab1Stack = createStackNavigator({
      Tabnavigation1: Tabnavigation1
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab2Stack = createStackNavigator({
      Tabnavigation2: Tabnavigation2
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const Tab3Stack = createStackNavigator({
      Tabnavigation3: Tabnavigation3
    },
      {
        defaultNavigationOptions: {
          headerStyle: {
            backgroundColor: '#010101',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }
      }
    );
    const AppNavigator = createBottomTabNavigator(
      {
        HomeStack: {
          screen: HomeStack,
          navigationOptions: {
            tabBarLabel: "Alisa",
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? 'ios-chatbubbles' : 'ios-home'}
                size={26}
                style={{ color: tintColor }}
              />
            ),
          },
        },
        Tab1Stack: {
          screen: Tab1Stack,
          navigationOptions: {
            tabBarLabel: '通讯录',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-people'
                size={26}
                style={{ color: tintColor }}
              />
            ),
          },
        },
        Tab2Stack: {
          screen: Tab2Stack,
          navigationOptions: {
            tabBarLabel: '发现',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-navigate'
                size={26}
                style={{ color: tintColor }}
              />
            ),
          },
        },
        Tab3Stack: {
          screen: Tab3Stack,
          navigationOptions: {
            tabBarLabel: '我',
            tabBarIcon: ({ tintColor }) => (
              <Ionicons
                name='ios-person'
                size={26}
                style={{ color: tintColor }}
              />
            ),
          },
        },
      },
      {
        tabBarOptions: {
          labelStyle: {
            fontSize: 12,
          },
          headerTitle: {
            fontSize: '20',
            color: 'white',
            fontWeight: '500'
          },
          activeTintColor: '#4dbe2d',
          inactiveTintColor: 'gray',
        }
      }
    );
    const Route = createAppContainer(AppNavigator);
    export default Route;
    

    Home.js

    import React, { Component } from 'react';
    import { View, Text, Image, FlatList, TouchableHighlight } from 'react-native';
    import Ionicons from 'react-native-vector-icons/Ionicons';
    import HomeStyle from './HomeStyle'
    const CHAT_DATA = [
      {
        title: '好友1',
        content: '模仿微信主界面',
        time: 'today',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '好友2',
        content: '模仿微信主界面',
        time: 'today',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '好友3',
        content: '模仿微信主界面',
        time: 'today',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      },
      {
        title: '好友4',
        content: '模仿微信主界面',
        time: '2月25日',
        posters: { thumbnail: 'http://i.imgur.com/UePbdph.jpg' }
      }
    ]
    class Chat extends Component {
      render() {
        return (
          <FlatList data={CHAT_DATA}
            renderItem={this.renderChat}
            // keyExtractor={item=>item.id}
            keyExtractor={(item, index) => index.toString()}
          />
        );
      }
      renderChat({ item }) {
        return (
          <View style={HomeStyle.chatbox}>
            <Image source={{ uri: item.posters.thumbnail }} style={HomeStyle.thumbnail} />
            <View style={HomeStyle.contentbox}>
              <Text style={HomeStyle.title}>{item.title}</Text>
              <Text style={HomeStyle.content}>{item.content}</Text>
            </View>
            <View style={HomeStyle.timebox}>
              <Text style={HomeStyle.time}>{item.time}</Text>
            </View>
          </View>
        )
      }
    }
    class RightTitle extends Component {
      render() {
        return (
          <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
            <Ionicons name='md-search' size={26} style={HomeStyle.rightIcon1} />
            <Ionicons name='ios-add' size={26} style={HomeStyle.rightIcon2} />
          </View>
        );
      }
    }
    class Home extends Component {
      static navigationOptions = {
        // headerTitle:"Alisa",
        headerLeft: <Text style={HomeStyle.leftTitle}>Alisa</Text>,
        headerRight: <RightTitle />
      };
      render() {
        return (
          <View style={HomeStyle.container}>
            <TouchableHighlight onPress={() => this.props.navigation.push("Details")} underlayColor="white">
              <Chat />
            </TouchableHighlight>
          </View>
        );
      }
    }
    export default Home
    

    HomeStyle.js

    import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            leftTitle: {
                fontSize: 20,
                color: '#fff',
                marginLeft: 20
            },
            rightIcon1: {
                color: "#fff",
                marginRight: 20
            },
            rightIcon2: {
                color: "#fff",
                marginRight: 20
            },
            chatbox: {
                flex: 1,
                flexDirection: 'row',
                backgroundColor: '#fff',
                borderBottomColor:"#eee",
                borderBottomWidth:1,
                height:70,
                alignItems: 'center'
            },
            thumbnail: {
                width: 60,
                height: 60,
                marginLeft:10,
            },
            contentbox:{
                width:'60%',
                marginLeft:10,
                flexDirection:'column'
            },
            title: {
                fontSize: 16,
                marginBottom: 8,
                textAlign: 'center',
                textAlign:'left'
            },
            content:{
                color:'#d3d3d3',
                textAlign:'left'
            },
            timebox:{
                flexDirection:'row',
            },
            time: {
                color:'#d3d3d3'
            }
        }
    );
    

    Details.js

    import React, { Component } from 'react';
    import { View, Text, Button } from 'react-native';
    const styles = {
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    }
    class Details extends Component {
      static navigationOptions = {
        headerTitle:"聊天信息"
      };
      render() {
        return (
          <View style={styles.container}>
            <Text>Details Screen</Text>
            <Button
              title="Go to Home"
              onPress={() => this.props.navigation.navigate('Home')}
            />
            <Button
              title="Go back"
              onPress={() => this.props.navigation.goBack()}
            />
          </View>
        );
      }
    }
    export default Details
    

    Tabnavigation1.js

    import React, { Component } from 'react';
    import { View, ART } from 'react-native';
    import Tab1Style from './Tab1Style'
    const { Surface, Shape, Path, Group, Text } = ART;
    class Tabnavigation1 extends Component {
      static navigationOptions = {
        headerTitle: "通讯录"
      };
      render() {
        const linePath = Path().moveTo(1, 1).lineTo(300, 1);
        const juxingPath = new Path().moveTo(1, 1).lineTo(1, 99).lineTo(99, 99).lineTo(99, 1).close();
        const textPath = new Path().moveTo(40, 40).lineTo(99, 10)
        return (
          <View style={Tab1Style.container}>
            {/* <Text>绘制直线、虚线、矩形、文本,此处如果有Text,会与下方Text报错重复定义</Text> */}
            <Surface width={300} height={2} style={{ marginTop: 20 }}>
              <Shape d={linePath} stroke='#000000' strokeWidth={2} />
            </Surface>
            <Surface width={300} height={2} style={{ marginTop: 20 }}>
              <Shape d={linePath} stroke='#000000' strokeWidth={2} strokeDash={[10, 5]} />
            </Surface>
            <Surface width={100} height={100} style={{ marginTop: 20 }}>
              <Shape d={juxingPath} stroke='#000000' strokeWidth={1} fill='#892265' />
            </Surface>
            <Surface width={100} height={100} style={{ marginTop: 20 }}>
              <Text stroke='#000000' strokeWidth={1} font='bold 35px Heiti SC'
                path={textPath} >Text</Text>
            </Surface>
            <Surface width={100} height={100}>
              <Group>
                <Shape d={juxingPath} stroke="#FFFFFF" fill="#eee" strokeWidth={1} />
                <Text strokeWidth={1} strokeDash={[2, 1, 2, 1]} stroke="#000" font="bold 30px Heiti SC" path={textPath} >Group</Text>
              </Group>
            </Surface>
          </View>
        );
      }
    }
    export default Tabnavigation1
    

    Tab1Style.js

    import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            }
        }
    );
    

    Tabnavigation2.js

    import React, { Component } from 'react';
    import { StyleSheet, View, Text, TouchableHighlight, Image, Dimensions } from 'react-native';
    import ImagePicker from 'react-native-image-picker';
    import Tab2Style from './Tab2Style'
    const BadgeData = {
      data: [
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "Alisa分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          "title": "开心网分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "QQ分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "QQ空间分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "QQ微博分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "人人网分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "微信分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "微博分享"
        },
        {
          icon: "http://i.imgur.com/UePbdph.jpg",
          title: "朋友圈分享"
        }
      ]
    }
    //屏幕的宽度
    const width = Dimensions.get('window').width;
    //定义一些全局的变量
    const cols = 3;
    const boxW = 100;
    const vMargin = (width - cols * boxW) / (cols + 1);
    const hMargin = 25;
    //设置样式
    const styles = StyleSheet.create({
      container: {
        //    确定主轴的方向
        flexDirection: 'row',
        //    一行显示不完的话换行显示
        flexWrap: 'wrap'
      },
      outViewStyle: {
        //    设置侧轴的对齐方式
        alignItems: 'center',
        width: boxW,
        height: boxW,
        marginLeft: vMargin,
        marginTop: hMargin
      },
      iconStyle: {
        width: 80,
        height: 80,
        marginBottom: 5
      },
      mainTitleStyle: {
    
      }
    });
    const photoOptions = {
      title: '请选择',
      quality: 0.8,
      cancelButtonTitle: '取消',
      takePhotoButtonTitle: '拍照',
      chooseFromLibraryButtonTitle: '选择相册',
      allowsEditing: true,
      noData: false,
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };
    class ImagePickerView extends Component {
      constructor(props) {
        super(props);
        this.state = {
          avatarSource: null
        };
        this.choosePicker = this.choosePicker.bind(this)
      }
      choosePicker() {
        ImagePicker.showImagePicker(photoOptions, (response) => {
          if (response.didCancel) {
            console.log('User cancelled image picker');
          }
          else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
          }
          else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton);
          }
          else {
            let source = { uri: response.uri };
            // You can also display the image using data:
            // let source = { uri: 'data:image/jpeg;base64,' + response.data };
    
            this.setState({
              avatarSource: source
            });
          }
        });
      }
      render() {
        return (
          <View style={Tab2Style.imgbox}>
            <TouchableHighlight style={Tab2Style.button} onPress={this.choosePicker}>
              <Text>相机 & 相册</Text>
            </TouchableHighlight>
            <Image source={this.state.avatarSource} style={Tab2Style.imageStyle}></Image>
          </View>
        )
      }
    }
    class Tabnavigation2 extends Component {
      static navigationOptions = {
        headerTitle: "发现"
      };
      render() {
        return (
          <View style={Tab2Style.container}>
            <Text>Tabnavigation2</Text>
            <ImagePickerView />
            <View style={styles.container}>
            {/*返回6个包*/}
            {this.renderAllBadge()}
          </View>
          </View>
        );
      }
      // 返回所有的包
      renderAllBadge() {
        // 定义数组装所有的子组件
        let allBadge = [];
        // 遍历json数据
        for (let i = 0; i < BadgeData.data.length; i++) {
          // 取出每一个数据对象
          let badge = BadgeData.data[i];
          // 装入数据
          allBadge.push(
            <View key={i} style={styles.outViewStyle}>
              {/* <Image
                style={styles.iconStyle}
                source={{ uri: badge.icon }}
              ></Image> */}
              <Image
                style={styles.iconStyle}
                source={{ uri: badge.icon }}
              ></Image>
              <Text style={styles.mainTitleStyle}>
                {badge.title}
              </Text>
            </View>
          );
        }
        // 返回数组
        return allBadge;
      }
    }
    export default Tabnavigation2

    Tab2Style.js

    import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor:'#fff'
            },
            imgbox: {
                flex: 1,
                marginTop: 20,
                alignItems: 'center'
            },
            button: {
                marginTop: 20,
                backgroundColor: '#808080',
                height: 35,
                width: 140,
                borderRadius: 5,
                justifyContent: 'center',
                alignItems: 'center'
            },
            imageStyle: {
                height: 180,
                width: 250,
                marginTop: 30,
                alignSelf: 'center'
            }
        }
    );
    

    Tabnavigation3.js

    import React, { Component } from 'react';
    import { View, Text, FlatList, } from 'react-native';
    import Tab3Style from './Tab3Style'
    import Ionicons from 'react-native-vector-icons/Ionicons';
    const INBOX_DATA = [
      {
        title: 'Severe Warning',
        content: '0 of 1 Task Completed',
        time: '6:07 PM'
      },
      {
        title: 'Severe Warning',
        content: '1 of 1 Task Completed',
        time: 'Yesterday'
      },
      {
        title: 'Moderate Warning',
        content: '',
        time: 'Yesterday'
      },
      {
        title: 'Hello',
        content: '',
        time: 'Jan 21'
      }
    ]
    class Inbox extends Component {
      render() {
        return (
          <FlatList data={INBOX_DATA}
            renderItem={this.renderInbox}
            // keyExtractor={item=>item.id}
            keyExtractor={(item, index) => index.toString()}
          />
        );
      }
      renderInbox({ item }) {
        return (
          <View style={Tab3Style.inboxContainer}>
            <View style={Tab3Style.inbox_box_left}>
              <Text style={Tab3Style.inbox_content1_left}>{item.title}</Text>
              <Text style={Tab3Style.inbox_content2_left}>{item.content}</Text>
            </View>
            <View style={Tab3Style.inbox_box_right}>
              <Text style={Tab3Style.inbox_content1_right}>{item.time}</Text>
            </View>
          </View>
        )
      }
    }
    class Tabnavigation3 extends Component {
      static navigationOptions = {
        headerTitle: "我"
      };
      render() {
        return (
          <View style={Tab3Style.totalbox}>
            <View style={Tab3Style.box1}>
              <View style={Tab3Style.box1_content1}>
                <Text style={Tab3Style.title}>Inbox</Text>
              </View>
              <View style={Tab3Style.box1_content2}>
                <Ionicons name='md-search' size={38} style={Tab3Style.rightIcon1} />
                <Ionicons name='ios-add-circle' size={40} style={Tab3Style.rightIcon2} />
              </View>
            </View>
            <View style={Tab3Style.box2}>
              <Inbox />
            </View>
          </View>
        );
      }
    }
    export default Tabnavigation3
    

    Tab3Style.js

    import React from 'react';
    import {
        StyleSheet
    } from 'react-native';
    
    export default StyleSheet.create(
        {
            totalbox:{
                display:"flex"
            },
            box1:{
                height:'40%',
                borderBottomColor:"#eee",
                borderBottomWidth:1,
                flexDirection:'row',
                alignItems: 'center',
                padding:20,
                width:'100%'
            },
            box1_content1:{
                width:'30%'
            },
            title:{
                fontSize:40,
                fontWeight:'bold'
            },
            box1_content2:{
                flexDirection:'row',
                width:'70%',
                justifyContent:'flex-end'
            },
            rightIcon1: {
                color: "#747474",
                marginRight: 20
            },
            rightIcon2: {
                color: "#a526fb",
                marginRight: 20
            },
        }
    );
    
    • demo12

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • React Native常用组件

    2018-08-14 14:47:08
    本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-...

    转自: https://www.jianshu.com/p/bd810785d3d6

    本文收录了,React Native中常用的一些相关组件,

    摘录的过程中,可能有所差错,不足之处还望指出.

    希望大家可以互相学习,互帮互助!


    第一部分

    基于react-navigation组件的自定义 head 视图

    react-native-carousel 轮播图

    react-native-countdown 倒计时

    react-native-device-info 设备信息

    react-native-fileupload 文件上传

    react-native-icons 图标

    react-native-image-picker 图片选择器

    react-native-keychain iOSKeyChain管理

    react-native-picker 滚轮选择器

    react-native-picker-Android 安卓滚轮选择器

    react-native-refreshable-listview 可刷新列表

    react-native-scrollable-tab-view 可滚动标签

    react-native-side-menu 侧边栏

    react-native-swiper 轮播

    react-native-video 视频播放

    react-native-viewpager 分页浏览

    react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架

    react-native-tab-navigator 底部或上部导航框架(不可滑动)

    react-native-check-box CheckBox

    react-native-splash-screen 启动白屏问题

    react-native-simple-router 简易路由跳转框架

    react-native-storage 持久化存储

    react-native-sortable-listview 分类ListView

    react-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制

    react-native-easy-toast 一款简单易用的 Toast 组件


    第二部分

    选项卡 https://github.com/exponentjs/react-native-tab-navigator

    material组件库

    https://github.com/xinthink/react-native-material-kit

    base组件库

    http://nativebase.io/docs/v0.4.6/components#anatomy

    https://github.com/GeekyAnts/NativeBase

    按钮

    https://github.com/mastermoo/react-native-action-button

    https://github.com/ide/react-native-button

    表单验证

    https://github.com/gcanti/tcomb-form-native

    https://github.com/FaridSafi/react-native-gifted-form

    https://github.com/bartonhammond/snowflake

    带动画效果的TextInput

    https://github.com/halilb/react-native-textinput-effects

    https://github.com/zbtang/React-Native-TextInputLayout

    聊天

    https://github.com/FaridSafi/react-native-gifted-chat

    蓝牙通信

    http://blog.csdn.net/withings/article/details/71378562

    谷歌地图

    https://github.com/lelandrichardson/react-native-maps

    高德地图

    https://github.com/Eleme-IMF/dodo

    时间轴,快递流程图效果

    https://github.com/24ark/react-native-step-indicator

    https://github.com/thegamenicorus/react-native-timeline-listview

    动画效果

    https://github.com/oblador/react-native-animatable

    加载Loading动画

    https://github.com/maxs15/react-native-spinkit

    抽屉效果

    https://github.com/root-two/react-native-drawer

    https://github.com/react-native-fellowship/react-native-side-menu

    侧滑按钮

    https://github.com/dancormier/react-native-swipeout

    https://github.com/jemise111/react-native-swipe-list-view

    图表/制图

    https://github.com/tomauty/react-native-chart

    股票金融

    https://github.com/7kfpun/FinanceReactNative

    时间组件

    https://github.com/xgfe/react-native-datepicker

    日历组件

    https://github.com/wix/react-native-calendars

    电子签名

    https://github.com/jgrancher/react-native-sketch

    下拉放大(回弹效果)

    https://github.com/lelandrichardson/react-native-parallax-view

    日历组件

    https://github.com/cqm1994617/react-native-myCalendar

    https://github.com/vczero/react-native-calendar

    多语言

    https://github.com/joshswan/react-native-globalize

    单选/多选组件

    https://github.com/hinet/react-native-checkboxlist

    二维码

    https://github.com/ideacreation/react-native-barcodescanner

    制作本地库

    https://github.com/frostney/react-native-create-library

    影音相关

    https://github.com/MisterAlex95/react-native-record-sound

    提示消息(横条Bar)

    https://github.com/KBLNY/react-native-message-bar

    iOS原生TableView

    https://github.com/aksonov/react-native-tableview

    点击弹出视图

    https://github.com/jeanregisser/react-native-popover

    https://github.com/instea/react-native-popup-menu

    3D Touch

    https://github.com/madriska/react-native-quick-actions

    双平台兼容的ActionSheet

    https://github.com/beefe/react-native-actionsheet

    照片墙

    https://github.com/ldn0x7dc/react-native-gallery

    键盘遮挡问题

    https://github.com/reactnativecn/react-native-inputscrollview

    https://github.com/wix/react-native-keyboard-aware-scrollview

    本地存储

    https://github.com/sunnylqm/react-native-storage

    小星星评分(动画效果)

    https://github.com/djchie/react-native-star-rating

    扫描二维码

    https://github.com/lazaronixon/react-native-qrcode-reader

    通讯录

    https://github.com/rt2zz/react-native-contacts

    加密

    https://www.npmjs.com/package/crypto-js

    清除缓存

    https://github.com/reactnativecn/react-native-http-cache

    ListView的优化

    https://github.com/sghiassy/react-native-sglistview

    图片base64转码

    https://github.com/xfumihiro/react-native-image-to-base64

    白屏问题

    https://github.com/mehcode/rn-splash-screen

    Text跑马灯效果

    https://github.com/remobile/react-native-marquee-label

    WebView相关

    https://github.com/alinz/react-native-webview-bridge

    判断横竖屏

    https://github.com/yamill/react-native-orientation

    PDF

    https://github.com/cnjon/react-native-pdf-view

    获取设备信息

    https://github.com/rebeccahughes/react-native-device-info

    手势放大/缩小/移动

    https://github.com/kiddkai/react-native-gestures

    https://github.com/johanneslumpe/react-native-gesture-recognizers

    上拉-刷新/下拉-加载

    https://github.com/FaridSafi/react-native-gifted-listview

    https://github.com/jsdf/react-native-refreshable-listview

    https://github.com/greatbsky/react-native-pull/wiki

    下拉选

    https://github.com/alinz/react-native-dropdown

    图片查看

    https://github.com/oblador/react-native-lightbox

    照片选择

    https://github.com/marcshilling/react-native-image-picker

    https://github.com/ivpusic/react-native-image-crop-picker

    图片加载进度条

    https://github.com/oblador/react-native-image-progress

    轮播视图

    https://github.com/race604/react-native-viewpager

    https://github.com/FuYaoDe/react-native-app-intro

    https://github.com/appintheair/react-native-looped-carousel

    https://github.com/leecade/react-native-swiper

    模态视图

    https://github.com/maxs15/react-native-modalbox

    https://github.com/brentvatne/react-native-modal

    https://github.com/bodyflex/react-native-simple-modal

    毛玻璃效果

    https://github.com/react-native-fellowship/react-native-blur

    HTML 相关

    https://github.com/jsdf/react-native-htmlview

    推荐一款最近用到的日历组件(iOS android 两端通用)———–2018-01-25

    日历组件

    https://github.com/xgfe/react-native-datepicker

    下拉选组件(ios,android 两端通用)———2018-01-25

    Picker组件

    https://github.com/beefe/react-native-picker

    短信倒计时(支持后台持续计时) ——2018-04-09

    https://github.com/kkkelicheng/ReactNative-CountDownButton

    展开全文
  • 前言React Native开发环境可以搭建在Windows平台或者Mac平台下。早期React Native对Mac平台支持的比较好,但是到了0.21.0版本,React Native在win平台也开始满满成熟起来。当然,在win平台上你无法查看iOS运行效果,...

    前言

    React Native开发环境可以搭建在Windows平台或者Mac平台下。早期React Native对Mac平台支持的比较好,但是到了0.21.0版本,React Native在win平台也开始满满成熟起来。当然,在win平台上你无法查看iOS运行效果,在此我显示的是在Mac下面搭建React Native环境,并且创建第一个Hello World!项目。

    在mac系统环境下搭建React Native环境,首先要通过App Store把操作系统升级到最新的版本,Xcode也要安装和升级到最新的版本。Xcode安装以后要启动一次,同意苹果的开发者协议,再自行补充安装一些Xcode开发组件。

    React Native环境搭建

    一.安装Homebrew

    Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。
    Home-brew 的使用方式:
    1)搜索软件:brew search 软件名,如brew search wget
    2)安装软件:brew install 软件名,如brew install wget
    3)卸载软件:brew remove 软件名,如brew remove wget

    Homebrew的安装非常简单,打开终端复制、粘贴以下命令,回车,搞定

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    运行效果:


    当你看到Installation successful的时候,说明你已经安装成功。截图如下:


    我们可以通过下面的语句来查看是否安装成功,即Homebrew的版本号。

    brew -v
    运行效果


    说明:Homebrew还有很多操作,这里我就不做一一说明了,具体可以参考这位朋友写的一篇博客。Ruby系列文章之2 --- Windows下安装Ruby on Rails 开发环境

    二.安装Node.js

    安装语句

    brew install node
    运行截图



    三.安装React Native的命令行工具(react-native-cli)

    React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    安装命令如下

    npm install -g react-native-cli
    运行效果如下


    若出现错误(可能由于权限不足),则实用以下语句进行安装:

    sudo npm install -g react-native-cli
    补充:(由于国内网络问题,可以将npm仓库替换为国内镜像)
    //将npm仓库替换为国内镜像:
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    四.推荐安装的工具

    1.Watchman

    Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
    终端运行语句安装:

    brew install watchman
    运行效果


    2.Flow

    Flow是一个静态的JS类型检查工具,可方便找出代码中可能存在的类型错误。
    译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。
    终端运行语句安装:

    brew install flow

    五.React Native开发工具安装

    React Native没有带任何代码编辑工具,它的代码可以使用任何一款纯文本处理器进行编辑。React Native官方推荐了三种IDE编写React Native应用:Atom和Nuclide、WebStorm、Sublime Text和VSCode+React Native Tools。我这里推荐Sublime Text编辑器进行代码编辑。

    1.Sublime Text3安装

    请直接访问Sublime Text3的官网进行安装。Sublime Text3下载地址:http://www.sublimetext.com/3


    2.Package Control插件安装

    (1)使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台,将下面的Python代码粘贴到控制台里:

    import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. 
      注意:上面的代码会随着版本不同而改变,所以最好取到官网【1】去复制代码。
    (2)如果不能自动安装的话,官网【1】也提供了手动(Manual)安装方法,具体做法可以去到官网参考
    (3)如果在Perferences->package settings中看到package control这一项,则表明安装成功。

    3.用Package Control安装插件

    这里我就不详细说了,我是使用了babel-sublime和sublimeLinter插件,大家可以根据自己的习惯进行安装。



    六.创建项目

    1.初始化项目

    命令行创建项目

    react-native init ZFJProject

    注:ZFJProject为项目名称,大家可以自己的定义。

    初始化项目需要很长的一段时间,大家可以出去转一转,远眺一下,放松放松;然后就是项目创建成功了;项目里面iOS文件和安卓文件。


    注:如果大家的创建时间太长,可以找到Node.js的安装目录,进入nodejs\node_modules\npm找到文件npmrc,打开后在该文件末尾加上
    registry = https://registry.npm.taobao.org 然后保存退出即可。

    2.运行工程

    我这里直接以iOS为例,可以直接运行ZFJProject.xcodeproj文件,当然也可以直接通过代码运行,代码如下:

    //  进入项目根目录
    cd ZFJProject
    
    //  运行iOS项目
    react-native run-ios
    回车以后会有一连串的反应,截图如下:



    模拟器效果


    3.编辑代码

    将index.ios.js拖入你安装的编辑器,我这里使用的是Sublime Text 3


    这样你就可以这这里面装逼了。。。编辑完成,重新运行就可以看到新的效果了



    展开全文
  • 在很多app应用型APP中,个人中心往往会单独出一个模块,而对于刚入门React Native的朋友来说,怎么去实现一些静态的页面,并且怎么着手实现,怎么分层,怎么去实现这个架构,我想是很基础的(ps,本人新书,《React ...

    在很多app应用型APP中,个人中心往往会单独出一个模块,而对于刚入门React Native的朋友来说,怎么去实现一些静态的页面,并且怎么着手实现,怎么分层,怎么去实现这个架构,我想是很基础的(ps,本人新书,《React Native实战经典》定义国庆前后出版,欢迎大家捧场)。
    首先,看一下实现的效果:
    这里写图片描述这里写图片描述

    项目讲解

    首先,这是一个纯静态的页面,包括顶部的个人介绍页面,已经下面的一个扩展页面。而下面扩展页面风格基本差不多,我们可以对其做一个简单的封装(MineItemCell.js),为了项目代码维护的方便,我们还可以将这些样式统一一下(text.js)。
    text.js文字样式

    /**
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React from 'react';
    import ReactNative, { StyleSheet, Dimensions, Text ,ReactElement} from 'react-native';
    
    export function HeadingBig({style, ...props}: Object): ReactElement {
        return <Text style={[styles.h0, style]} {...props} />
    }
    
    export function Heading1({style, ...props}: Object): ReactElement {
        return <Text style={[styles.h1, style]} {...props} />
    }
    
    export function Heading2({style, ...props}: Object): ReactElement {
        return <Text style={[styles.h2, style]} {...props} />
    }
    
    export function Paragraph({style, ...props}: Object): ReactElement {
        return <Text style={[styles.p, style]} {...props} />
    }
    
    export function Tip({style, ...props}: Object): ReactElement {
        return <Text style={[styles.tip, style]} {...props} />
    }
    
    const styles = StyleSheet.create({
        h0: {
            fontSize: 40,
            color: '#06C1AE',
        },
        h1: {
            fontSize: 15,
            fontWeight: 'bold',
            color: '#222222',
        },
        h2: {
            fontSize: 14,
            color: '#222222',
        },
        p: {
            fontSize: 13,
            color: '#777777',
        },
        tip: {
            fontSize: 13,
            color: '#999999'
        }
    });
    

    MineItemCell.js

    /**
     * Copyright (c) 2017-present, Liu Jinyong
     * All rights reserved.
     *
     * https://github.com/huanxsd/MeiTuan  
     * @flow
     */
    
    import React, { Component } from 'react';
    import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
    import { Heading2, Paragraph } from './widght/Text'
    import Separator from './widght/Separator'
    
    var Dimensions = require('Dimensions');
    var ScreenWidth = Dimensions.get('window').width;
    
    class MineItemCell extends Component {
        render() {
            let icon = null;
            if (this.props.image) {
                icon = <Image style={styles.icon} source={this.props.image} />
            }
            return (
                <View style={styles.container}>
                    <TouchableOpacity>
                        <View style={[styles.content, this.props.style]}>
                            {icon}
                            <Heading2>{this.props.title}</Heading2>
                            <View style={{ flex: 1, backgroundColor: 'blue' }} />
                            <Paragraph style={{ color: '#999999' }}>{this.props.subtitle}</Paragraph>
                            <Image style={styles.arrow} source={require('./image/icon_arrow.png')} />
                        </View>
    
                        <Separator />
                    </TouchableOpacity>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            backgroundColor: 'white',
        },
        content: {
            height: 44,
            flexDirection: 'row',
            alignItems: 'center',
            paddingLeft: 15,
            paddingRight: 10,
        },
        icon: {
            width: 25,
            height: 25,
            marginRight: 10,
        },
        subtitleContainer: {
            flexDirection: 'row',
            justifyContent: 'flex-end',
            alignItems: 'center',
        },
        arrow: {
            width: 14,
            height: 14,
            marginLeft: 5,
        }
    });
    
    export default MineItemCell;
    

    然后到界面的绘制了,首先绘制顶部个人资料部分:

    renderHeader() {
            return (
                <View style={styles.header}>
                    <View style={styles.topContainer}>
                        <TouchableOpacity>
                            <Image style={[styles.icon, {marginRight: 15}]}
                                   source={require('./image/icon_navigationItem_message_white.png')}/>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Image style={[styles.icon, {marginRight: 10}]}
                                   source={require('./image/icon_navigationItem_set_white.png')}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.userContainer}>
                        <Image style={styles.avatar} source={require('./image/avatar.png')}/>
                        <View>
                            <View style={{flexDirection: 'row'}}>
                                <Heading1 style={{color: 'white'}}>code_xzh</Heading1>
                                <Image style={{marginLeft: 4}}
                                       source={require('./image/beauty_technician.png')}/>
                            </View>
                            <Paragraph style={{color: 'white', marginTop: 4}}>个人信息 ></Paragraph>
                        </View>
                    </View>
                </View>
            )
        }

    接着,我们在绘制下面的部分,由于下面部分我们队每个子视图做了封装,所以,我们可以这么做:通过getDataList()获取所有的值,进而绘制。
    renderCells代码:

    renderCells() {
            let cells = []
            let dataList = this.getDataList()
            for (let i = 0; i < dataList.length; i++) {
                let sublist = dataList[i]
                for (let j = 0; j < sublist.length; j++) {
                    let data = sublist[j]
                    let cell = <MineItemCell image={data.image} title={data.title} subtitle={data.subtitle}
                                             key={data.title}/>
                    cells.push(cell)
                }
                cells.push(<SpacingView key={i}/>)
            }
    
            return (
                <View style={{flex: 1}}>
                    {cells}
                </View>
            )
        }

    getDataList()代码:

    getDataList() {
            return (
                [
                    [
                        {title: '我的钱包', subtitle: '办信用卡', image: require('./image/icon_mine_wallet.png')},
                        {title: '余额', subtitle: '¥95872385', image: require('./image/icon_mine_balance.png')},
                        {title: '抵用券', subtitle: '63', image: require('./image/icon_mine_voucher.png')},
                        {title: '会员卡', subtitle: '2', image: require('./image/icon_mine_membercard.png')}
                    ],
                    [
                        {title: '好友去哪', image: require('./image/icon_mine_friends.png')},
                        {title: '我的评价', image: require('./image/icon_mine_comment.png')},
                        {title: '我的收藏', image: require('./image/icon_mine_collection.png')},
                        {title: '会员中心', subtitle: 'v15', image: require('./image/icon_mine_mineorder.png')},
                        {title: '积分商城', subtitle: '好礼已上线', image: require('./image/icon_mine_member.png')}
                    ],
                    [
                        {title: '客服中心', image: require('./image/icon_mine_service.png')},
                        {title: '关于美团', subtitle: '我要合作', image: require('./image/icon_mine_about.png')}
                    ]
                ]
            )
        }
    

    页面完整代码:

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow ScrollView组件
     */
    
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        RefreshControl,
        Image,
        ScrollView,
        TouchableOpacity,
        View
    } from 'react-native';
    import { Heading1, Heading2, Paragraph } from './widght/Text'
    import MineItemCell from './MineItemCell';
    import SpacingView from './widght/SpacingView'
    
    var Dimensions = require('Dimensions');
    var screenWidth = Dimensions.get('window').width;
    var screenHeight = Dimensions.get('window').height;
    
    
    class MineScene extends Component {
    
        state: {
            isRefreshing: boolean
        }
    
        constructor(props: Object) {
            super(props)
    
            this.state = {
                isRefreshing: false
            }
        }
    
        onHeaderRefresh() {
            this.setState({isRefreshing: true})
    
            setTimeout(() => {
                this.setState({isRefreshing: false})
            }, 2000);
        }
    
        renderCells() {
            let cells = []
            let dataList = this.getDataList()
            for (let i = 0; i < dataList.length; i++) {
                let sublist = dataList[i]
                for (let j = 0; j < sublist.length; j++) {
                    let data = sublist[j]
                    let cell = <MineItemCell image={data.image} title={data.title} subtitle={data.subtitle}
                                             key={data.title}/>
                    cells.push(cell)
                }
                cells.push(<SpacingView key={i}/>)
            }
    
            return (
                <View style={{flex: 1}}>
                    {cells}
                </View>
            )
        }
    
        renderHeader() {
            return (
                <View style={styles.header}>
                    <View style={styles.topContainer}>
                        <TouchableOpacity>
                            <Image style={[styles.icon, {marginRight: 15}]}
                                   source={require('./image/icon_navigationItem_message_white.png')}/>
                        </TouchableOpacity>
                        <TouchableOpacity>
                            <Image style={[styles.icon, {marginRight: 10}]}
                                   source={require('./image/icon_navigationItem_set_white.png')}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.userContainer}>
                        <Image style={styles.avatar} source={require('./image/avatar.png')}/>
                        <View>
                            <View style={{flexDirection: 'row'}}>
                                <Heading1 style={{color: 'white'}}>code_xzh</Heading1>
                                <Image style={{marginLeft: 4}}
                                       source={require('./image/beauty_technician.png')}/>
                            </View>
                            <Paragraph style={{color: 'white', marginTop: 4}}>个人信息 ></Paragraph>
                        </View>
                    </View>
                </View>
            )
        }
    
        getDataList() {
            return (
                [
                    [
                        {title: '我的钱包', subtitle: '办信用卡', image: require('./image/icon_mine_wallet.png')},
                        {title: '余额', subtitle: '¥95872385', image: require('./image/icon_mine_balance.png')},
                        {title: '抵用券', subtitle: '63', image: require('./image/icon_mine_voucher.png')},
                        {title: '会员卡', subtitle: '2', image: require('./image/icon_mine_membercard.png')}
                    ],
                    [
                        {title: '好友去哪', image: require('./image/icon_mine_friends.png')},
                        {title: '我的评价', image: require('./image/icon_mine_comment.png')},
                        {title: '我的收藏', image: require('./image/icon_mine_collection.png')},
                        {title: '会员中心', subtitle: 'v15', image: require('./image/icon_mine_mineorder.png')},
                        {title: '积分商城', subtitle: '好礼已上线', image: require('./image/icon_mine_member.png')}
                    ],
                    [
                        {title: '客服中心', image: require('./image/icon_mine_service.png')},
                        {title: '关于美团', subtitle: '我要合作', image: require('./image/icon_mine_about.png')}
                    ]
                ]
            )
        }
    
    
        render() {
            return (
                <View style={styles.container}>
                    <View style={{
                        position: 'absolute',
                        width: screenWidth,
                        height: screenHeight / 2,
                        backgroundColor: '#06C1AE'
                    }}/>
                    <ScrollView
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                onRefresh={() => this.onHeaderRefresh()}
                                tintColor='gray'
                            />
                        }>
                        {this.renderHeader()}
                        <SpacingView />
                        {this.renderCells()}
                    </ScrollView>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#f3f3f3',
        },
        header: {
            backgroundColor: '#06C1AE',
            paddingBottom: 20
        },
        topContainer: {
            flexDirection: 'row',
            justifyContent: 'flex-end',
            alignItems: 'center',
            marginTop: 7,
        },
        icon: {
            width: 27,
            height: 27,
        },
        userContainer: {
            flexDirection: 'row',
            alignItems: 'center',
            margin: 10,
        },
        avatar: {
            width: 50,
            height: 50,
            marginRight: 10,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: '#51D3C6'
        }
    });
    
    export default MineScene;
    

    美团项目源码地址:react native美团项目源码

    展开全文
  • 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的。如果我们的项目里需要使用图片上传(用JS 实现图片上传),那我们有没有什么办法呢?通过搜索react-native的github, 会发现...
  • 在这一系列的帖子中,我们将使用React NativeReact Native游戏引擎开发一个经典的大金刚街机游戏的翻拍版。因为这将是一个手机游戏,因此我们将大大简化其原始控件——我们的游戏只能用一根手指玩。
  • 整理的一份 React Native 开发中常用的三方组件库大全。 完整的 App 使用React Native开发且功能完整的App。 序号 名称 简介 1 surmon.me.native 一个非常适合入门学习的react-native项目,有借鉴自其他种子...
  • React Native 的 css 跟 web开发中css还是很相似的,其中 backgroundColor 支持的颜色值与 css 一致,为方便查找写在这里。 其他样式可以参考 CSS 样式网站 : http://css.doyoe.com/#basic Color ...
  • 作者简介李焱,2010 年毕业于北京大学信息管理系,获得信息管理学士学位及计算机软件学士学位;...课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props、state、生命周期函数等,样式和 F
  • React Native同样提供了丰富的动画API供开发者调用,而对于此部分知识的掌握无疑是RN进阶的必经之路,本文通过案例带大家实践掌握Animated、ART等动画及绘图知识。 Animated ART 手势系统 实现的效果     ...
  • React native 组件

    2018-05-01 17:09:59
    React Native Awesome》这里fork过来的,汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。因后面无法 Pull requests 所以增加了居多资源,比如:一起踩坑、 音...
  • [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-...
  • 前言这周完成了公司 React Native app 更新(非热更新)功能,在这里总结一下。1.首先,提出一个问题我们的 app(基于RN)已经有 热更新 功能了,为什么还要一个更新的功能?因为热更新只会更新非 Native 的代码和...
  • 在线图片的宽高获取直接用 Image.getSize(url, (_width, _height) =&gt; { }); 这个就不细说了。...} from 'react-native'; const orderImage = Image.resolveAssetSource(require('./im...
  • React Native 之 颜色

    2016-11-08 09:08:45
    支持以下格式: ‘#f0f’ (#rgb) ‘#f0fc’ (#rgba) ‘#ff00ff’ (#rrggbb) ‘#ff00ff00’ (#rrggbbaa) ‘rgb(255, 255, 255)’ ‘rgba(255, 255, 255, 1.0)’ ‘hsl(360, 100%, 100%)’ ‘hsla(360, 100%, 100%, 1.0...
  • 最近在做项目ReactNative项目时需要获取手机的经纬度,刚开始直接使用浏览器的原生方法:navigator.geolocation.getCurrentPosition,在ios手机运行正常,但是在Android部分机型上面会超时。 分析 1,因为ios6以后...
  • ReactNative文件上传
1 2 3 4 5 ... 20
收藏数 1,496
精华内容 598
热门标签