精华内容
参与话题
问答
  • RN布局与样式 一款好的App离不开漂亮的布局,RN中的布局方式采用的是FlexBox(弹性布局) FlexBox提供了在不通尺寸设备上都能保持一致的布局方式 宽和高 尺寸是没有单位的 ​运行在android上的时候 100dp ...

    RN布局与样式

    一款好的App离不开漂亮的布局,RN中的布局方式采用的是FlexBox(弹性布局)

    FlexBox提供了在不通尺寸设备上都能保持一致的布局方式

    flexBox

    宽和高

    尺寸是没有单位的
    ​运行在android上的时候 100dp
    iso 的时候 100pt
    字体会被解释成16sp

    像素无关

    和而不同

    ​ RN中FlexBox和Web Css上FlexBox工作方式是一样的,但有些地方还是有出入的

    ​ flexDirection:

    ​ RN中默认是flexDirection:‘column’,Web Css中默认是 flex-direction:‘row’

    ​ alignItems:

    ​ RN中默认alignItems: ‘stretch’,在Web Css中默认 align-items:‘flex-start’

    ​ flex:

    ​ RN中只接受一个属性,Web css 可以接受多个属性:flex: 2 2 10%

    ​ 不支持的属性: align-content flex-basis order flex-flow flex-grow flex-shrink

    Flex in RN

    ​ 以下属性是RN所支持的Flex属性

    ​ 容器属性

    ​ 项目属性

    ​ alignSelf

    ​ auto(default) 元素继承了父容器的align-item属性,如果没有则为’stretch’

    ​ stretch

    ​ center

    ​ flex-start

    ​ flex-end

    ​ flex:定义了一个元素可伸缩的能力,默认是0

    样式

    属性与状态

    RN中使用两种数据来控制一个组件:propsstateprops是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state

    具体在页面中使用

    import React, { Component } from 'react';
    import {
      View,
      Text,
      StyleSheet
    } from 'react-native';
    
    class PropsPage extends Component {
      constructor(props) {
        super(props)
        this.state = {
          showText: ''
        }
      }
      componentDidMount () {
        setTimeout(() => {
          this.setState({
            showText: '软谋教育前端课程'
          })
        }, 1000)
      }
      render () {
        const { showText } = this.state
        const show = showText ? 'none' : 'flex'
        return (
          <View style={styles.container}>
            <Text style={{ display: show }}>loading....</Text>
            <Text style={styles.text}>{showText}</Text>
            <TextShow name={'子组件'}></TextShow>
          </View>
        )
      }
    }
    function TextShow (props) {
      return (
        <View>
          <Text>{props.name}</Text>
        </View>
      )
    }
    
    export default PropsPage;
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue'
      },
      text: {
        color: '#fff'
      }
    })
    
    展开全文
  • useState 使用也和react一样,其他也一样就不多举例 import React, { Component, ...} from 'react-native'; export default function Flex () { const [count, setCount] = useState(0) const addCount = () =>

    useState 使用也和react一样,其他也一样就不多举例

    import React, { Component, useState } from 'react';
    import {
      View,
      Text,
      StyleSheet,
      Button
    } from 'react-native';
    
    export default function Flex () {
      const [count, setCount] = useState(0)
      const addCount = () => {
        let newCount = count
        setCount(newCount += 1)
      }
      handelClick = () => {
        alert('dianji')
      }
      return (
        <View style={styles.container}>
          <Text style={[styles.text, { backgroundColor: 'red', textAlign: 'center' }]}>{count}</Text>
          <Button title="增加" onPress={addCount}></Button>
          <Button title="点击" onPress={this.handelClick} color="#841584"></Button>
            <ActivityIndicator
              size="large"
              animating={true}
              color="#841584"
            ></ActivityIndicator>
            Image source={require('./img/dask.gif')} style={{ width: 300, height: 300 }}></Image>
            <Image source={{ uri: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590671406&di=d041102044a03c687bdbee360807c96a&src=http://cdn.duitang.com/uploads/item/201410/04/20141004070754_NFWSQ.jpeg' }}
              style={{ width: 100, height: 100 }}
            ></Image>
            <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
            <View style={{ flex: 1 }}>
              <Text>Hello World!</Text>
            </View>
          </SafeAreaView>
          <WebView
            source={{ uri: 'https://www.baidu.com' }}
            style={{ marginTop: 20 }}
          />
        </View>
      )
    }
    
    const styles = StyleSheet.create({
      container: {
        width: 100,
        height: 100,
        margin: 10,
        backgroundColor: 'gray'
      },
      text: {
        fontSize: 20, margin: 20
      }
    })
    
    展开全文
  • 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定...

    构建项目

    在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)

    1. react-native --v //查看版本
      react-native init demo --version 0.48.0//安装指定的版本
      react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度
      npm view react-native versions //可以查看react-native所有的版本信息
      

    跳转到对应路径下执行相应的移动端项目:

    cd 项目名 
    react-native run-ios or react-native run-android
    

    如果正常,运行效果如下:

    在这里插入图片描述

    RN调试技巧

    Developer Menu

    Developer Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Native应用。

    在模拟器上开启Developer Menu

    Android模拟器:

    可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。

    iOS模拟器:

    可以通过Command⌘ + D快捷键来快速打开Developer Menu。

    Reload

    刷新页面,其快捷键是 command + R

    注意:只有修改 JavaScript 文件时,刷新功能才起作用。如果新增了文件或者修改了 Native 代码,就需要使用 Xcode 重新编译应用了。

    Debug JS Remotely

    该功能允许开发人员在 Chrome 中调试应用,其调试方式和调试 Web 应用一样。

    change bundle location

    改变打包后的地址

    toggle inspector

    在模拟器中查看组件样式。不怎么好用。

    disable fast refresh

    禁止快速刷新

    Show Perf Monitor

    该功能启用后会显示一个监控窗口,显示出实时的内存占用、UIJavaScriptFPS 等信息。帮助我们调试性能问题。

    Errors and Warnings

    在development模式下,js部分的Errors 和 Warnings会直接打印在手机或模拟器屏幕上,以红屏和黄屏展示。。

    Errors

    React Native程序运行时出现的Errors会被直接显示在屏幕上,以红色的背景显示,并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。

    在这里插入图片描述

    Warnings

    React Native程序运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示,或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning

    Chrome Developer Tools

    第一步:启动远程调试

    在Developer Menu下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开,同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

    在这里插入图片描述

    第二步:打开Chrome开发者工具

    在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。

    • 断点调试

    当发生一些"莫名奇妙"的问题错误,常用解决方案

    这里的莫名其妙是指,在上一刻代码还可以正常运行,在没有修改的情况下爆红:

    1.刷新 ! 刷新! 刷新!

    2.重新使用react-native run-xxx命令启动App

    3.删掉App程序,关掉本地服务器,清除本地缓存

    yarn:清空缓存
    
    yarn cache clean
    
    npm:清空缓存
    
    npm cache clean -f
    
    
    展开全文
  • 组件的生命周期 组件的生命周期一般分为这 4 个阶段:创建阶段、实例化阶段、运行(更新)阶段、销毁阶段。下面对各个阶段分别进行介绍。 创建阶段:该阶段主要发生在创建组件类的时候,在这个阶段中会初始化组件...

    组件的生命周期

    组件的生命周期一般分为这 4 个阶段:创建阶段、实例化阶段、运行(更新)阶段、销毁阶段。下面对各个阶段分别进行介绍。

    • 创建阶段:该阶段主要发生在创建组件类的时候,在这个阶段中会初始化组件的属性类型和默认属性。

    • 实例化阶段:该阶段主要发生在实例化组件类的时候,也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程,按执行顺序如下:

      • constructor:构造函数,这里主要对组件的一些状态进行初始化。
      • componentWillMount:准备加载组件,可以在这里做一些业务初始化操作,或者设置组件状态。
      • render:生成页面需要的 DOM 结构,并返回该结构。
      • componentDidMount:组件加载成功并被成功渲染出来后执行。一般会将网络请求等加载数据的操作放在这里进行,保证不会出现 UI 上的错误。
    • 更新阶段:该阶段主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。这个阶段也会触发一系列的流程,按执行顺序如下:

      • componentWillReceiveProps:当组件接收到新的 props 时,会触发该函数。在该函数中,通常可以调用 this.setState 方法来完成对 state 的修改。
      • shouldComponentUpdate:该方法用来拦截新的 propsstate,然后根据事先设定好的判断逻辑,做出最后要不要更新组件的决定。
      • componentWillUpdate:当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作。
      • render:根据一系列的 diff 算法,生成需要更新的虚拟 DOM 数据。(注意:在 render 中最好只做数据和模板的组合,不应进行 state 等逻辑的修改,这样组件结构会更加清晰)
      • componentDidUpdate:该方法在组件的更新已经同步到 DOM 中去后触发,我们常在该方法中做 DOM 操作。
    • 销毁阶段:该阶段主要在组件消亡的时候触发

      • componentWillUnmount:当组件要被从界面上移除时就会调用。可以在这个函数中做一些相关的清理工作,例如取消计时器、网络请求等。
    import React, {Component} from 'react';
    import {
      View,
      Text,
      StyleSheet,
      TouchableOpacity
    } from 'react-native';
    import {Actions} from 'react-native-router-flux';
    import HomeDetails from './HomeDetails';
    
    export default class Home extends Component {
      constructor(props) {
        super(props);
        this.state = {
          clickText: "开始点击按钮",
          count: 1,
          detailContent: true
        }
      }
    
      componentWillMount() {
        console.log("componentWillMount1111");
      }
    
      shouldComponentUpdate(nextProps, nextState){
        console.log(this.state.detailContent,'detailContent');
        if (this.state.count !== nextState.count) {
          console.log("shouldComponentUpdate1111---组件需要更新");
          return true;
        }
        return false;
      }
    
      componentWillUpdate(){
        console.log("componentWillUpdate1111---组件将要更新");
      }
    
      componentDidUpdate(){
        console.log("componentDidUpdate1111---组件更新完毕");
      }
    
      componentDidMount() {
        console.log("componentDidMount1111");
      }
    
      componentWillUnmount() {
        console.log("componentWillUnmount1111");
      }
    
      clickButton(){
        const { count } = this.state;
        this.setState({
          clickText: "我点击了按钮",
          count: count + 1,
          detailContent: false
        })
      }
    
      render() {
        console.log("render1111");
        return (
          <View style={styles.container}>
            <Text>欢迎来到首页</Text>
            <TouchableOpacity
              onPress={() => Actions.notice()}
            >
              <Text>跳转到公告页</Text>
            </TouchableOpacity>
            <Text style={{color: 'blue', fontSize: 40}}>{this.state.count}</Text>
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.clickButton()}
            >
              <Text>{this.state.clickText}</Text>
            </TouchableOpacity>
            <HomeDetails detailContent={this.state.detailContent}/>
          </View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
      },
      button: {
        width: 250,
        height: 60,
        backgroundColor: 'red',
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center'
      }
    });
    
    import React, {Component} from 'react';
    import {
      View,
      Text,
      StyleSheet
    } from 'react-native';
    
    export default class HomeDetails extends Component {
      constructor(props) {
        super(props);
        this.state = {}
      }
    
      componentWillMount() {
    
      }
    
      componentWillReceiveProps(nextProps){
        console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
        console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
      }
    
      componentDidMount() {
    
      }
    
      componentWillUnmount() {
    
      }
    
      render() {
        return (
          <View style={styles.container}>
            <Text>欢迎HomeDetails</Text>
          </View>
        )
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
      }
    });
    
    展开全文
  • React Native中文网 开发工具 前端开发软件:Visual Studio Code 移动端开发软件:Xcode、Android Studio 知识储备 NodeJS React Es6,Es7 React Native介绍 React Naitve的简介:Facebook在React.js Conf2015...
  • 试过了很多方法,包括修改ip地址,以及`react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-...
  • react-native

    千次阅读 2016-09-24 16:08:19
    626  Star5,989  Fork 1,611 reactnativecn/react-native-guide  Code Issues 2 Pull requests 0 Projects 0 Wiki Pulse Graphs ...React Native指南汇集了各类react-native学习资源、开源
  • 刚根据官网教程搭建完react-native环境,init项目之后,运行的时候报如下错误,求高手指导: Scanning 558 folders for symlinks in D:\AwesomeProject\node_modules (24ms) ┌─────────────────...
  • 我在用react-native进行项目打包的时候,我的debug模式在真机中能够运行,在release模式下运行时闪退,我在Android studio中查看logcat的时候,出现下面代码?请问是什么原因导致的? ``` 07-10 19:05:07.446 ...
  • React Native开源库react-native-image-crop-picker使用图解

    万次阅读 热门讨论 2017-05-27 15:16:44
    欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。 一、开源库介绍 ...目前大多数App都有头像展示的功能,在实际开发中,用户更换头像的需求屡见不鲜,...例如:react-native-image-pick...
  • 当前的环境: ...直接通过react-native init FisrtApp 通过react-native run-andriod出现报错,报错如图,请问如何解决 ![图片说明](https://img-ask.csdn.net/upload/201705/20/1495211556_69150.png)
  • react-native 轮播图 ——react-native-swiper使用

    万次阅读 热门讨论 2017-05-23 23:02:31
    今天学习了轮播图的使用,上网查阅了一下,发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件,对比了下文档,觉得react-native-swiper功能更加完善,而且文档说明比较全面,所以...
  • 在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。...在项目开发中,我们优先选择一些开源兼容性比较好的第三方库,例如,react-navigation,以及本文即将说到的react
  • 由于项目需要支持左滑&右滑的list组件,所以上网看了一下, 发现了 react-native-swipe-list-view 觉得不错,分享给大家。 (1).此库支持单个组件的左滑右滑,也支持list组件的左滑右滑 首先看一下效果图: 1....
  • react-native-video 是一个播放视频的开源组件, 它的用法很简单。 1.安装 依次执行下面两个命令, npm i -S react-native-video react-native link (这一步是连接本地视频库) (1) ios: 如果您想允许其他应用...
  • ReactNative 使用用第三方组件react-native-svg时Android下出现错误,IOS 正常,希望哪位大神能尽快帮解决,谢谢!!错误如下: ``` Unable to launch redbox because react activity is not available, here ...
  • 随着项目对react native的使用,碰到了很多RN的坑。。。只可惜我不是职业前端,让我一个php...。这篇主要是实现RN的单选按钮,上传表单的时候使用的。...1、npm i react-native-radio-master –save 2、这个组件不需要npm
  • reactnative热更新 react-native-pushy

    千次阅读 2018-02-08 17:09:03
    首先你应该有一个基于React Native开发的应用,我们把具有package.json的目录叫做你的”应用根目录”。 如果你还没有初始化应用,请参阅开始使用React Native。 所以我们也假设你已经拥有了开发React Native应用的...
  • react-native使用react-navigation进行页面跳转导航

    万次阅读 热门讨论 2017-05-27 15:38:48
    首先要确认已经配置好react-native的环境。 # 创建一个native应用,SimpleApp # 然后进入项目目录 react-native init SimpleApp cd SimpleApp # 通过npm安装最新版本的react-navigation npm install --save...
  • react-native

    万次阅读 2018-03-02 00:42:51
    react-native 坑 this绑定 如果自定义函数中需要调用state和props属性或者其他函数需要用到this时,必须在onPress里的函数中绑定this,形如: this.onSubmit.bind(this) &lt;Text style={styles.titleText...
  • react-native试玩(35)-react-native-icons插件

    千次阅读 2015-09-24 15:12:48
    react-native-icons 下载在项目的根目录下执行npm install react-native-icons@latest --save,下载完成后可以在node_modules目录下看到该插件:配置目前只支持iOS,所以只有xcode的配置:导入ReactNativeIcons....
  • 老规矩,还是先添加依赖: ...react-native link react-native-sound 方法介绍 // 加载声音文件 let musciPath = require('../../src/sound/1.mp3'); // 匹配的格式挺多的.... var music = new Sound...
  • npm install react-native-side-menu --save 使用 引入组件 import SideMenu from 'react-native-side-menu'; 使用组件: render() { const menu = Text style={{marginTop: 22}}>aaaText
  • react-native运行闪退

    2017-09-20 08:11:35
    安装了Android Studio 使用真机模拟开发 使用工具 sublime text 运行 react-native run-andriod 在真机上运行没有问题,但是更改代码进行保存, 运行环境自动关闭,只能重新输入命令运行,请问是什么问题?
  • react-native-zyCountDown 用于react-native的计数组件,倒计时组件 封装的一个倒计时按钮,仅仅使用TouchableOpacity,View和Text. 安装 npm i react-native-zycountdown 或者 yarn add react-native-...
  • 安装 1.添加 yarn add react-native-splash-screen ... react-native link react-native-splash-screen 修改原生代码 Android: 通过以下更改更新MainActivity.java以使用react-native-spl...
  • react-native与svg整合 ----- react-native-svg

    千次阅读 2018-01-09 14:03:20
    React-Native 与Iconfont整合 1、从阿里妈妈上选择自己所需要的素材,下载源代码 http://www.iconfont.cn/ 下载后得到的iconfont.ttf iconfont.svg.js即为所需文件 两种解决方案: react-native-vector-...

空空如也

1 2 3 4 5 ... 20
收藏数 44,875
精华内容 17,950
关键字:

react-native