Vary's Blog

React Native学习笔记(二)

导入导出变量

  • 导出变量
    在每个变量前加上export关键字,即可导出

    1
    2
    3
    export var name='zchu';
    export var age=25;
    export const url='zchu.githun.io';

    或者你觉得每个都要加关键字,想一步到位,则可以用这种方式导出

    1
    2
    3
    4
    var name = 'zchu';
    var age = 25;
    const url = 'zchu.githun.io';
    export {name, age, url}//批量导出
  • 导出方法
    同样也是使用export关键字导出

    1
    2
    3
    export function sum(a, b) {
    return a+b;
    }
  • 导入变量和方法是一样的

    1
    import {文件名},{name,age,url,sum} from '{文件路径}'
  • 使用导入的变量和方法

    1
    2
    3
    4
    5
    6
    7
    <Text>name:{name}</Text>
    <Text
    onPress={()=>{
    Alert.alert("总数为"+sum(5,7))
    }}>
    >age:{age}</Text>
    ...

props使用详解

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。

通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个自定义的组件使用props的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

我们在Greeting组件中将name作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。

Vary Zhao wechat
欢迎你扫描上面的二维码,加我微信