export native react
2017-05-14 11:29:21 mapbar_front 阅读数 670

之前我们引入和导出一个模块通常是这样的。

在a.js中这样写

module.exports = {
变量1,
变量2,
变量3…
}
其中,变量1,2,3…可以是函数,变量,常量等等

在b.js中这样写

var x = require(“./a.js”);
使用(x.变量123)来访问相应的a.js中抛出的变量。

common.js不能在浏览器上直接运行,根本原因是浏览器不支持module、exports、require等等关键字。
如果想在浏览器中表示,有插件可以解决这样的问题。

但是现在我们这样使用:
import Child from ‘./example’

export {
alert,
SimpleAlertExampleBlock
};
export default SimpleAlertExampleBlock;

我们现在多出了默认导出。export default,default的英文意思就是默认的意思,我们在使用的时候默认导出一个“变量”。

react-native中,我们的时间是这样了,使用import导入,使用export导出。
我们需要把react和react-dom两个模块导入:
import React,{ Component } from “react”;
import { render } from “react-dom”;

然后我们抛出一个组件
render(,document.getElementById(“root”));
但是我们现在还缺少Main组件,所以必须把Mian组件导入:
import Mian from “./Main.js”;
root是index.html定义个一个id名。代表在id名为“root”的盒子中我们进行单页面应用的开发。

一个Main组件的代码块是这样的:

import React,{ Component } from "react";
import { View, Text} from "react-native";
import PropTypes from "prop-types";
import { connect } from "react-redux"

import styles from "../css/Common.css";
export default class App extends Component {
    render(){
        return (
            <View className={[styles.container]}>
                <Text>hello!Mapbar_front!</Text>
            </View>
        )
    }
}

<完>

2018-10-11 20:36:49 u011068702 阅读数 871

1 问题

部分代码如下

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

export default class App extends React.Component {
  render() {
    return <RootStack/>;
  }
}

 

 

 

2 解决办法

export default 声明只能有一个,改成如下即可

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator({
    Home : {
        screen : HomeScreen
    },
});

export default class App extends React.Component {
  render() {
    return <RootStack/>;
  }
}

 

 

2018-05-24 15:37:56 xinzi11243094 阅读数 105

设置.js文件默认以jsx的语法打开

在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示:

这里写图片描述

当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧:



然后Apply/OK即可。

设置.js文件中支持react-native语法高亮

首先会发现在js文件中有不少的警告,类似这样:


这个警告的原因是因为编辑器不知道所引用的这些东西是在哪(不知道源在哪),所以需要告诉编辑器所写的东西是在哪个源里面:


在下图的download manager里面找到react和react-native下载安装,然后返回到上图的窗口,按照上图第五部分勾选刚才下载的两个library即可。


至此完毕,最终效果如下:


警告和报错都得以解决了。可以安心的写代码了,哈哈!

如果上面处理后还有问题,请点击设置你IDE的JavaScript版本。seting-->

2016-08-16 20:03:00 weixin_34253539 阅读数 7

设置.js文件默认以jsx的语法打开

在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示:

这里写图片描述

当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧:



然后Apply/OK即可。

设置.js文件中支持react-native语法高亮

首先会发现在js文件中有不少的警告,类似这样:


这个警告的原因是因为编辑器不知道所引用的这些东西是在哪(不知道源在哪),所以需要告诉编辑器所写的东西是在哪个源里面:


在下图的download manager里面找到react和react-native下载安装,然后返回到上图的窗口,按照上图第五部分勾选刚才下载的两个library即可。


至此完毕,最终效果如下:


警告和报错都得以解决了。可以安心的写代码了,哈哈!

如果上面处理后还有问题,请点击设置你IDE的JavaScript版本。seting-->


2016-12-12 09:37:53 sinat_17775997 阅读数 1254

设置.js文件默认以jsx的语法打开

在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示:

这里写图片描述

当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个一劳永逸的方法把它给去掉吧:



然后Apply/OK即可。

设置.js文件中支持react-native语法高亮

首先会发现在js文件中有不少的警告,类似这样:


这个警告的原因是因为编辑器不知道所引用的这些东西是在哪(不知道源在哪),所以需要告诉编辑器所写的东西是在哪个源里面:


在下图的download manager里面找到React和react-native下载安装,然后返回到上图的窗口,按照上图第五部分勾选刚才下载的两个library即可。


至此完毕,最终效果如下:


警告和报错都得以解决了。可以安心的写代码了,哈哈!

如果上面处理后还有问题,请点击设置你IDE的JavaScript版本。seting-->

没有更多推荐了,返回首页