入门教程,native组件优化

React Native基础&入门教程:以一个To Do List小例子,看props和state

2018/08/09 · 基本功技术 ·
React Native

原文出处:
葡萄城技巧团队   

在上篇中,大家介绍了何等是Flexbox布局,以及怎样行使Flexbox布局。还没有看过的小伙伴欢迎回到文章列表点击查看以前的文章驾驭。

那就是说,当大家有了大旨的布局概念之后,就足以做一些有意思的尝尝了。但是,它们会有一个美中不足:只是悄无声息地呆在那边,不收受举报。换句话说,它们从使用起来到截止,唯有一种情状。

专注,上面那句话实际包涵了RN中(当然还要也是React中)四个极度主要的定义:

  • 第一,“从使用起来到截止”,意味着它在岁月上有一段生命周期(Life
    Cycle)
  • 第二,应用其实可以享有很多样状态(State),比如,正常时是一种情形,出错时是另一种情况。而且这一个意况可以在少数标准下举行更换。

在支付进程中,某些效率须要重复使用,利用React中的props来传递参数,通过参数来控制子组件的特性。

ReactNative 栈导航(StackNavigator):
第一步引入import {StackNavigator} from ‘react-navigation’;
其次步:创建组件设置navigationOptions
其三步:StackNavigator 配置屏幕
(1.索要做跳转的别的零件时索要经过props获取navigate ,
const
{navigate}=this.props.navigation,然后在跳转事件之中调用navigator(‘传入要跳转显示器对应的key’)
2.假若在navigationOptions里面做跳转则须求呢{navigation}传进去,然后代用navigation.navigate(‘传入要跳转显示屏对应的key’),如下:
在导航的左边添加headerRight 重点是把navigation传进去,比如

此小说只适合新手,老驾驶员如有宝贵意见请多提。

基本概念:

在RN中,界面的变更对应着程序状态的变迁。或者说,界面的变迁,正是因为使用的事态发生了更换而导致的。应用的处境主要由四个变量支配,props和state,它们可以存在于继续自React.Component的每一个零件中。state由组件自身定义,用来管理组件及其子组件的情景。而props来自于父组件,在本组件中一定于常量,它的改变形式只可以来自于父组件。

在RN中,界面的扭转对应着程序状态的扭转。或者说,界面的转移,正是因为使用的处境暴发了转移而造成的。应用的状态主要由三个变量支配,props和state,它们得以存在于继续自React.Component的每一个零部件中。state由组件自身定义,用来保管组件及其子组件的场合。而props来自于父组件,在本组件中相当于常量,它的改变方式只好来自于父组件。

state和props都分歧意手动地间接设值。像this.state.a = 1或者this.props.b =
2那种代码是会报错的。要改变state,只可以是在本组件中调用this.setState方法。而要改变props,只好依赖于它的值在传下来此前,已经在其父组件中被改成。

既然在组件中,state属性无论从字面意义如故程序语义上,都是用来代表处境的,那么为何还亟需一个props属性呢?

自己的了解主要有四个原因。

先是,因为有些组件其实是“无状态”的。它们只是接受父组件传给它们的东西,然后规规矩矩把它们渲染出来。它们自己内部不保留任何动静,它们只是对父组件状态的反馈。或者说:“它们不生育意况,它们只是父组件状态的屏幕。”父组件的气象通过props传递给子组件。大家平时会社团那种无状态的零部件,因为它义务单一,封装性好,可用作更复杂组件的基石。

第二,由于父组件与子组件之间频仍须要联动,props就是最直接的提供联动的一手。父组件中构造子组件时,就像是函数调用的传参一样,把要求的事物传给子组件的props。

state和props的严重性特色是,默许情状下。当它们改变时,RN会自动东西渲染与之相关的界面以保全和state与props同步。为啥说“默许情状下”,是因为我们可以运用生命周期函数手动“截断”那么些渲染逻辑,本文暂不涉及。

入门教程,native组件优化。此外,在RN中,其实也足以利用不属于props和state的变量,来手动控制组件的场合。但是不推荐这么做。因为那会使事态的支配方式变得不联合,不便宜前期维护。

使用此页面先下载第三方组件极度好用

static navigationOptions=({navigation})=>({

App

/**
 * Created by function on 2017/3/9.
 */
import React, {Component} from 'react';
//导入对应的页面文件
import Home from './Home'
import {
    StyleSheet,
    View,
    Text,
    Navigator
} from 'react-native';

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let defaultName = 'Home';
        let defaultComponent = Home;
        return (
            /**
             * initialRoute:指定了默认的页面,也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
             * configureScene:页面之间跳转时候的动画和手势,具体请看官方文档
             * renderScene:导航栏可以根据指定的路由来渲染场景,调用的参数是路由和导航器
             */
            <Navigator
                initialRoute={{name: defaultName, component: defaultComponent}}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator}/>
                }}/>
        );
    }
}

表明意见写得很明亮了,就不啰嗦了。

起来尝试:

大家已经得以依照state与props的概念做一个小训练了。它是一个ToDo
List,也就是待办列表。几乎长下边这一个样子:

亚洲必赢官网 1

To Do List草图

俺们把它分成三个页面。最右侧是添加待办事项的界面,记为ToDoListAdd。中间和最左侧其实是同一个界面,记为ToDoListMain,它具有三种差距意况。

我们先来看ToDoListAdd界面。它有上中下三个部分。最上边是一个可点击重回的头顶,中间是用来输入文字的TextInput,底部是一个确认添加的Button。

有没有发现它和上四次大家的flexbox小磨练界面很像吗?没错,基于上一篇的布局知识,大家得以一本万利地把页面修改成那样。

再来看ToDoListMain界面,它与ToDoListAdd很像。尾部的”添加”用以跳转至ToDoListAdd。“多选”用以让每一个待办项的Checkbox彰显出来,并且呈现最上面包括全选Checkbox的footer。

要完好地形成这些动用,本文的字数是不够的,后续小说会深入到更为细节的地点。可是首先,本文少禽介绍怎样落到实处以下基本效用:1.运用state控制编辑状态;2.行使state已毕界面的跳转;3.父子组件之间的通讯。让大家伊始编写程序,穿插着介绍着三点内容。

手续1,使用flex布局形成ToDoListAdd界面。在根目录新建一个文书ToDoListAdd.js,定义ToDoListAdd类。为越来越简明,这里省去要求组件的引入代码,以及体制代码。

export default class ToDoListAdd extends Component<Props> {
constructor(props) { super(props); } onPress() { } // 暂且为空 render()
{ return ( <View style={styles.container}> <View
style={styles.header}> <Text style={styles.add}
onPress={this.props.onBack}>再次回到</Text> </View> <View
style={styles.body}> <TextInput /> </View> <View
style={styles.footer}> <Button title=”确定” onPress={this.onPress}
style={styles.btn} /> </View> </View> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default class ToDoListAdd extends Component<Props> {
    constructor(props) {
        super(props);
    }
    onPress() { } // 暂且为空
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.add} onPress={this.props.onBack}>返回</Text>
                </View>
                <View style={styles.body}>
                    <TextInput />
                </View>
                <View style={styles.footer}>
                    <Button title="确定" onPress={this.onPress} style={styles.btn} />
                </View>
            </View>
        );
    }
}

值得注意的是,那里”再次回到”按钮的onPress回调函数来自于props。也就是说,当以此ToDoListAdd被应用的时候,父组件须求指定传给子组件(那里子组件就是ToDoListAdd)的onBack的值。可以看出,到近期甘休,上边的ToDoListAdd组件其实是一个”无状态”组件。它只是对父组件传来的props的渲染。但实则,TextInput日常是有景况的,因为里面的值会随着用户的变动而生成。那里大家临时并未拍卖它。

步骤2,早先成立ToDoListMain组件。当先导思索这么些组件的时候,至少有两件业务是亟需考虑的:

待办事项的数据源,应该来自那里?呈现和藏身底部的场合存应该在什么地方?

先是个难题,为了叙述方便,我们把待办事项的数据源用变量todoList来代表。
todoList可以明白为一些境况,它是内需在ToDoListMain组件中被呈现和操作的。有多个todoList的可选位置,要么放在ToDoListMain组件自身,要么放在ToDoListMain更上一层的机件中。于此同时,当ToDoListAdd组件试图添加一个新的待办事项时,ToDoListAdd组件是急需修改todoList那些数据源的。即使todoList在ToDoListMain组件中,ToDoListAdd组件就要求和ToDoListMain组件进行通讯。但那其实就绕了一个领域,因为从草图的逻辑上看,ToDoListAdd是与ToDoListMain同级的一个界面,它们中间要通讯,一般的做法是凭借共同的父组件。所以,就以此事例来说,把数据源就径直放在ToDoListAdd和ToDoListMain共同的父组件中是更便宜的取舍。接下来会合到,这些合伙的父组件就是App.js,它将引入ToDoListAdd和ToDoListMain,我们还会App.js中手动设置渲染接纳的逻辑。

其次个难点,突显和隐形底部是只在ToDoListMain组件中拔取的情况,它不与外场有关联,所以放在它其中即可。

透过地点的解析,大家创立起来创设ToDoListMain如下:

export default class ToDoListmain extends Component<Props> {
constructor(props) { super(props); this.state = { isEditing: false };
this.onEdit = this.onEdit.bind(this); this.renderItem =
this.renderItem.bind(this); } renderFooter(toggleCheckAll, isAllChecked)
{ if (!this.state.isEditing) { return null; } const count =
this.props.todoList.filter(item => item.isChecked).length; return (
<View style={styles.footer}> <CheckBox
onValueChange={toggleCheckAll} value={isAllChecked} /> <Text
style={styles.menu}>{`已选择:${count}项`}</Text>
</View> ); } onEdit() { this.setState((prevState) => { return {
isEditing: !prevState.isEditing } }); } renderItem(item) { return
(<ToDoListItem {…item} toggleItemCheck={this.props.toggleItemCheck}
isEditing={this.state.isEditing} />); } render() { const {
toggleCheckAll, isAllChecked, onAddItem, todoList } = this.props; return
( <View style={styles.container}> <View
style={styles.header}> <Text style={styles.add}
onPress={onAddItem}>添加</Text> <Text
style={styles.title}>待办列表</Text> <Text
style={styles.multi} onPress={this.onEdit}>{this.state.isEditing ?
‘撤销’ : ‘多选’} </Text> </View> <FlatList
style={styles.body} isEditing={this.state.isEditing} data={todoList}
renderItem={this.renderItem} /> {this.renderFooter(toggleCheckAll,
isAllChecked)} </View> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
export default class ToDoListmain extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            isEditing: false
        };
        this.onEdit = this.onEdit.bind(this);
        this.renderItem = this.renderItem.bind(this);
    }
    renderFooter(toggleCheckAll, isAllChecked) {
        if (!this.state.isEditing) {
            return null;
        }
        const count = this.props.todoList.filter(item => item.isChecked).length;
        return (
            <View style={styles.footer}>
                <CheckBox onValueChange={toggleCheckAll} value={isAllChecked} />
                <Text style={styles.menu}>{`已选择:${count}项`}</Text>
            </View>
        );
    }
    onEdit() {
        this.setState((prevState) => {
            return {
                isEditing: !prevState.isEditing
            }
        });
    }
    renderItem(item) {
        return (<ToDoListItem {…item}
            toggleItemCheck={this.props.toggleItemCheck}
            isEditing={this.state.isEditing} />);
    }
    render() {
        const { toggleCheckAll, isAllChecked, onAddItem, todoList } = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.add} onPress={onAddItem}>添加</Text>
                    <Text style={styles.title}>待办列表</Text>
                    <Text style={styles.multi}
                        onPress={this.onEdit}>{this.state.isEditing ? ‘取消’ : ‘多选’}
                    </Text>
                </View>
                <FlatList style={styles.body} isEditing={this.state.isEditing}
                    data={todoList} renderItem={this.renderItem} />
                {this.renderFooter(toggleCheckAll, isAllChecked)}
            </View>
        );
    }
}

咱俩来看该零件唯有一个景象,isEditing。它决定了左上角的文字是”裁撤”如故”多选”,也控制了底层是或不是出示。

俺们在控制尾部是或不是出示时,调用了一个自定义的函数,用它的再次回到值最为内容插入在调用函数的职位。在RN中,如若在渲染的时候回来null,就象征什么也不渲染。所以调用renderFooter时,在isEditing状态为false时,什么都不渲染。

toggleCheckAll用来控制是不是全选待办事项。isAllChecked是判定是还是不是全选。onAddItem用作点击”添加”文字的回调。而todoList就是最根本的待办事项的数据源了。它们都源于ToDoListMain的父组件,通过props传下来。

而ToDoListMain组件内部,有一个onEdit函数,用作右上角”废除”和”多选”文字onPress时的回调。在里面我们看出RN中设置state的没错方法是调用this.setState方法。

别的,为了演示方便,那里运用官方提供的Checkbox组件来代表待办事项是否check了。但以此Checkbox组件的骨子里唯有Android平台才有,iOS下没有。而对iOS的处理,打算在后头的小说中尤其分享。

再有某些值得注意的地方,是引入了FlatList组件来对todoList数据源举办渲染。FlatList是合法提供的企图突显列表的零件,老版本的ListView已经被标记为弃用了(deprecated)。FlatList组件对列表的渲染做了好多质量优化和意义增强。大家临时只是利用它来概括显示待办列表。

每一个待办事项应用了自定义的另一个零件ToDoListItem,大家霎时来看望它。

步骤3,完毕ToDoListItem组件。它从不协调的图景,也只是对父组件内容的来得。

export default class ToDoListItem extends Component<Props> {
constructor(props) { super(props); } render() { const { toggleItemCheck,
item } = this.props; const { isChecked, detail, level } = item; const
basicLevelStyle = styles.level; let specificLevelStyle; if (level ===
‘info’) { specificLevelStyle = styles.info; } else if (level ===
‘warning’) { specificLevelStyle = styles.warning; } else {
specificLevelStyle = styles.error; } return ( <View
style={styles.container}> {this.props.isEditing && <CheckBox
onValueChange={(value) => toggleItemCheck(item, value)}
style={styles.checkbox} value={isChecked} />} <Text
style={styles.detail}>{detail}</Text> <View
style={[basicLevelStyle, specificLevelStyle]}></View>
</View> ); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default class ToDoListItem extends Component<Props> {
    constructor(props) {
        super(props);
    }
    render() {
        const { toggleItemCheck, item } = this.props;
        const { isChecked, detail, level } = item;
        const basicLevelStyle = styles.level;
        let specificLevelStyle;
        if (level === ‘info’) {
            specificLevelStyle = styles.info;
        } else if (level === ‘warning’) {
            specificLevelStyle = styles.warning;
        } else {
            specificLevelStyle = styles.error;
        }
        return (
            <View style={styles.container}>
                {this.props.isEditing && <CheckBox onValueChange={(value) => toggleItemCheck(item, value)} style={styles.checkbox} value={isChecked} />}
                <Text style={styles.detail}>{detail}</Text>
                <View style={[basicLevelStyle, specificLevelStyle]}></View>
            </View>
        );
    }
}

专门是,每一项是不是被check,那么些景况其实源于于todoList数据源,而每一项的Checkbox的value完全受控于父组件传来的值,所以这种用户输入型的机件,其值完全受控于父组件的props的传值的,也常被誉为受控组件(Controlled
Component)。

除此以外,todoList的每一项,我们用level来表示待办项的某种等级,用detail表示它的内容,用isChecked来表示它是否到位。

不过做了那样多,大家还什么都没见到吗。所以,接下去的紧要一步,就是把ToDoListMain和ToDoListAdd的渲染逻辑一口气写到App.js中去。

手续4,写最外层的渲染逻辑。在App.js中,引入

import ToDoListMain from ‘./ToDoListMain’; import ToDoListAdd from
‘./ToDoListAdd’;

1
2
import ToDoListMain from ‘./ToDoListMain’;
import ToDoListAdd from ‘./ToDoListAdd’;

下一场定义App组件

export default class App extends Component<Props> {
constructor(props) { super(props); this.state = { current: ‘main’,
todoList: [ { level: ‘info’, detail: ‘一般的职分’, isChecked: false,
key: ‘0’ }, { level: ‘warning’, detail: ‘较首要的天职’, isChecked:
false, }, { level: ‘error’, detail: ‘万分关键且急切的任务’, isChecked:
false, key: ‘2’ } ] } this.onAddItem = this.onAddItem.bind(this);
this.onBack = this.onBack.bind(this); this.toggleCheckAll =
this.toggleCheckAll.bind(this); this.toggleItemCheck =
this.toggleItemCheck.bind(this); } onAddItem() {
this.setState((prevState) => { return { current: ‘add’ } }); }
onBack() { this.setState({ current: ‘main’ }); } toggleCheckAll() {
const flag = this.isAllChecked(); const newTodos =
this.state.todoList.map(item => { return { …item, isChecked: !flag
}; }); this.setState({ todoList: newTodos }); } toggleItemCheck(item,
key) { const newTodos = this.state.todoList.map(todo => { if (todo
!== item) { return todo; } return { …todo, isChecked: !item.isChecked
} }); this.setState({ todoList: newTodos }); } isAllChecked() { if
(!this.state.todoList) return false; if (this.state.todoList.length ===
0) return false; return this.state.todoList.every(item =>
item.isChecked); } render() { if (this.state.current === ‘main’) {
return (<ToDoListMain isAllChecked={this.isAllChecked()}
toggleCheckAll={this.toggleCheckAll}
toggleItemCheck={this.toggleItemCheck} onAddItem={this.onAddItem}
todoList={this.state.todoList} />); } else { return (<ToDoListAdd
onBack={this.onBack} />); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            current: ‘main’,
            todoList: [
                {
                    level: ‘info’,
                    detail: ‘一般的任务’,
                    isChecked: false,
                    key: ‘0’
                },
                {
                    level: ‘warning’,
                    detail: ‘较重要的任务’,
                    isChecked: false,
                },
                {
                    level: ‘error’,
                    detail: ‘非常重要且紧急的任务’,
                    isChecked: false,
                    key: ‘2’
                }
            ]
        }
        this.onAddItem = this.onAddItem.bind(this);
        this.onBack = this.onBack.bind(this);
        this.toggleCheckAll = this.toggleCheckAll.bind(this);
        this.toggleItemCheck = this.toggleItemCheck.bind(this);
    }
    onAddItem() {
        this.setState((prevState) => {
            return {
                current: ‘add’
            }
        });
    }
    onBack() {
        this.setState({
            current: ‘main’
        });
    }
    toggleCheckAll() {
        const flag = this.isAllChecked();
        const newTodos = this.state.todoList.map(item => {
            return {
                …item,
                isChecked: !flag
            };
        });
        this.setState({
            todoList: newTodos
        });
    }
    toggleItemCheck(item, key) {
        const newTodos = this.state.todoList.map(todo => {
            if (todo !== item) {
                return todo;
            }
            return {
                …todo,
                isChecked: !item.isChecked
            }
        });
        this.setState({
            todoList: newTodos
        });
    }
    isAllChecked() {
        if (!this.state.todoList) return false;
        if (this.state.todoList.length === 0) return false;
        return this.state.todoList.every(item => item.isChecked);
    }
    render() {
        if (this.state.current === ‘main’) {
            return (<ToDoListMain
                isAllChecked={this.isAllChecked()}
                toggleCheckAll={this.toggleCheckAll}
                toggleItemCheck={this.toggleItemCheck}
                onAddItem={this.onAddItem}
                todoList={this.state.todoList} />);
        } else {
            return (<ToDoListAdd onBack={this.onBack} />);
        }
    }
}

咱俩看来App组件有多少个状态,一个是current,用以指定当前渲染的是哪些界面(其实大家那里就八个界面)。另一个是todoList数据源。

界面是怎么样切换的呢?

观看render函数,里面就是界面渲染逻辑,如果this.state.current的值是main,那么就会渲染App就会渲染ToDoListMain,否则,渲染ToDoListAdd。你可以精晓成,我们手动完结了一个专门不难的前端路由。这一切都是基于当state转变时,相应的界面自动重新渲染了。

更具象地以来,我们把onAddItem作为props的一个性质传给ToDoListMain,把onBack也当作一个特性传给ToDoListAdd。所以当它们的底部相应文字被点击时,实际上调用的,是概念在App组件中的回调函数。回调函数修改了current状态,而current状态的修改引起了App的render函数重新被调用,它按照当下的current状态而又一次渲染了相应的界面。

todoList中每项的key值是给FlatList作为唯一标识用的。

除此以外,在setState句子中,大家会协会一个新的变量,然后一把setState,而不是去修改原有的state。那也是RN中的常用做法。对于初学者的话,可能语法有点怪异。然而,这样做是有它的说辞的。简单来讲,因为RN在尾部大批量选取了比较对象是或不是变动的逻辑,借使逐个便利对象的各类属性,而且对象很复杂的话,那些相比的逻辑是很慢的。但是,比较多少个对象的引用是不是等于却很简单,直接一个表达式就能够了。所以,大家在setState时往往会协会一个新的靶子。更深的机理就留给读者去探索啦。

好了,让大家运行早先后,看看效果怎样啊。

亚洲必赢官网 2

本文通过一个ToDo
List的事例,介绍了RN中最中央的五个概念state和props。并简短落成了意况提高、组件间的通讯等效果。

然则那个事例还没完。这些ToDo
List近期只是一个显得的效果,如何对它们进行编辑、添加、删除,后续会愈来愈分享。

作品中行使到的源码下载:
todo-list.zip

1 赞 收藏
评论

亚洲必赢官网 3

npm install –save teaset

title:’Title’,

Home

/**
 * Created by function on 2017/3/11.
 */
import React, {Component} from 'react';
import SecondPage from './SecondPage';
import TextButton from '../components/TextButton';
import {
    View,
} from 'react-native';
export default class Home extends Component {

    constructor(props) {
        super(props);
    }

    _onPress = () => {
        /**
         * 为什么这里可以取得 props.navigator?请看上面的App.js:
         * <Component {...route.params} navigator={navigator} />
         * 这里传递了navigator作为props
         */
        const { navigator } = this.props;

        if(navigator) {
            navigator.push({
                name: 'SecondPage',
                component: SecondPage,
            })
        }
    };

    render() {
        const {counter} = this.props;
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>我是第一个界面</Text>
                <TextButton onPress={this._onPress} text={'点击跳转'}/>
            </View>
        );
    }
}

一言以蔽之说一下,这里的页面就是简单的一个TextButton,点击事件之中onPress
先获取父页面传过来的navigator,判断到若是存在,那边就push跳转一个对面的页面,我那里写的是SecondPage。
哦,对,还有一个小细节,细心的同志审时度势看到自家的onPress不用那样写

_onPress={ this._onPress.bind (this) }

仍旧这样写

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._onPress = this._onPress.bind(this);
    }```
把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
写了以后是这样的

_onPress = () => {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: ‘SecondPage’,
component: SecondPage,
})
}
};

没写是这样

_onPress(){
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: ‘SecondPage’,
component: SecondPage,
})
}
};

大家对比一下就知道细节在哪里
简单封装一个TextButton

/**

  • Created by function on 2017/3/9.
    */
    import React, {Component} from ‘react’;
    import {StyleSheet, View, Text, TouchableOpacity} from
    ‘react-native’;

/**

  • 简单包装一个Button

  • text:显示的内容

  • onPress:回调
    */
    export default class TextButton extends Component {

    constructor(props) {
    super(props);
    }

    render() {
    const {text, onPress} = this.props;

     return (
         <View>
             <TouchableOpacity onPress={onPress} style={styles.button}>
                 <Text>{text}</Text>
             </TouchableOpacity>
         </View>
     );
    

    }
    }

const styles = StyleSheet.create({
button: {
width: 100,
height: 30,
padding: 10,
backgroundColor: ‘lightgray’,
alignItems: ‘center’,
justifyContent: ‘center’,
margin: 3
}
});

理解不了的请看注释

##SecondPage

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from ‘react’;
    import TextButton from ‘../components/TextButton’;
    import {
    View,
    Text,
    } from ‘react-native’;
    export default class SecondPage extends Component {

    _onPress = () => {
    const { navigator } = this.props;
    if(navigator) {
    /**
    * 感觉就如入栈出栈
    */
    navigator.pop();
    }
    };

    render() {
    return (
    <View style={{flex: 1, alignItems: ‘center’, justifyContent:
    ‘center’}}>
    <Text style={{color: ‘red’}}>我是第三个界面</Text>
    <TextButton onPress={this._onPress} text={‘点击跳回去’}/>
    </View>
    );
    }
    }

就简单的显示几个文字和跳转回去的按钮
##来看看效果
![效果图.gif](http://upload-images.jianshu.io/upload_images/4416446-3f0efc1b3f450666.gif?imageMogr2/auto-orient/strip)
手势和跳转动画在上面说了。
如有不完善地方,欢迎讨论

##带参跳转
按照上面的例子,加以改造。
直接上代码吧,注释意见写得听清楚的了

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from ‘react’;
    import SecondPage from ‘./SecondPage’;
    import TextButton from ‘../components/TextButton’;
    import {
    View,
    Text,
    } from ‘react-native’;
    export default class Home extends Component {

    // 构造
    constructor(props) {
    super(props);
    // 早先状态
    this.state = {
    id: 2,
    user: ”,
    };
    }

    _onPress = () => {
    /**
    * 为啥这里可以取得 props.navigator?请看下面的App.js:
    * <Component {…route.params} navigator={navigator} />
    * 那里传递了navigator作为props
    */
    const {navigator} = this.props;

     if (navigator) {
         navigator.push({
             name: 'SecondPage',
             component: SecondPage,
             params: {
                 id: this.state.id,
                 /**
                  * 把getUser这个方法传递给下一个页面获取user
                  * @param user
                  */
                 getUser: (user) => {
                     this.setState({
                         user: user
                     })
                 }
             }
         })
     }
    

    };

    render() {
    const {user} = this.state;
    return (
    <View style={{flex: 1, alignItems: ‘center’, justifyContent:
    ‘center’}}>
    {user === ” && <Text>我是首先个界面</Text>}
    {user !== ” && <Text>用户音讯: { JSON.stringify(user)
    }</Text>}
    <TextButton onPress={this._onPress} text={‘点击跳转’}/>
    </View>
    );
    }
    }

/**

  • Created by function on 2017/3/11.
    */
    import React, {Component} from ‘react’;
    import TextButton from ‘../components/TextButton’;
    import {
    View,
    Text,
    } from ‘react-native’;

const USER = {
1: {name: ‘Action’, age: 23},
2: {name: ‘Function’, age: 25}
};

export default class SecondPage extends Component {

// 构造
constructor(props) {
    super(props);
    // 初始状态
    this.state = {
        id: '',
    };
}

componentDidMount() {
    /**
     *  这里获取从上个页面跳转传递过来的参数: id,赋值给this.state.id
     */
    this.setState({
        id: this.props.id
    })
}

_onPress = () => {
    const {navigator} = this.props;
    if (this.props.getUser) {
        let user = USER[this.props.id];
        this.props.getUser(user);
    }
    if (navigator) {
        /**
         * 感觉就像入栈出栈
         */
        navigator.pop();
    }
};

render() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={{fontSize: 15}}>获得的参数: id={ this.state.id }</Text>
            <Text style={{color: 'red'}}>我是第二个界面</Text>
            <TextButton onPress={this._onPress} text={'点击跳回去'}/>
        </View>
    );
}

}

##效果图


![效果图.gif](http://upload-images.jianshu.io/upload_images/4416446-2c1b7115e00c2078.gif?imageMogr2/auto-orient/strip)
github会随着更新而更新[https://github.com/LinsanityZ/EnjoyGossip](https://github.com/LinsanityZ/EnjoyGossip)
如有不完善地方,欢迎讨论

https://github.com/rilyu/teaset

headerRight:<Button title=’right’
onPress={()=>navigation.navigate(‘那里是指向的零部件key’)}/>

import {Label,Select} from ‘teaset’;按需引入标签来选取

});
3.索要传参数的时候在navigate(参数一是路由名字,参数二dict传值)
navigate(‘Chat’,{user:’abc’})
取参数的时候 要求 const {params} = this.props.navigation.state.
比如:const {params} = this.props.navigation.state;
return <Text>Chat with{params.user}</Text>
假诺是在navigationOptions取参数
比如 static navigationOptions =({navigation})=>({
title:${navigation.state.params.user},
}
)
//)。
···
/**

亚洲必赢官网 4

  • Sample React Native App
  • https://github.com/facebook/react-native
  • @flow
    */

B58AB9BA-028C-4900-8C4B-BAD75FFE542B.png

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Dimensions,
TextInput,
ScrollView,
FlatList,
SectionList,
Button
} from ‘react-native’;

import React, {Component} from ‘react’;
import {
AppRegistry,
StyleSheet,
View,
Text,
Image,
Button,
ScrollView,
TouchableOpacity,
} from ‘react-native’;
import {Label,Select} from ‘teaset’;

import {StackNavigator} from ‘react-navigation’;

//获取屏幕尺寸
var width = require(“Dimensions”).get(‘window’).width;
var height = require(“Dimensions”).get(‘window’).height;

class HomeScreen extends Component{
static navigationOptions =({navigation})=>({
title:’Main’,
headerRight:<Button title=”Right”
onPress={()=>navigation.navigate(‘Sec’,{user:’Lucy’})}/>,
}) ;
render(){
const {navigate} = this.props.navigation;
return(
<View>
<Text>this is Main</Text>
<Button title=”Second”
onPress={()=>navigate(‘Sec’,{user:’Lucy’})}/>
</View>
);
}

export default class Info extends Component {
static navigationOptions = ({navigation}) => {
var {navigate} = navigation;
return {
headerTitle: “个人音信”,
headerRight: (
<Text style={{
fontSize: 16,
color: “#fff”,
marginRight: 10
}} onPress={() => navigate(“search”)}></Text>
),
headerStyle: {
backgroundColor: “#ff6600”,
},
headerTitleStyle: {
alignSelf: “center”
},
headerTintColor: ‘#fff’
}
};
constructor(props) {
super(props);
this.state = {
};
}
ageItems=[
{
text:’2000′,
value:’1′,
},
{
text:’2001′,
value:’2′,
}
];
customItems = [
{
text: ‘男’,
value: 1,
},
{
text: ‘女’,
value: 2,
}
];
cityItems = [
{
text: ‘深圳’,
亚洲必赢官网,value: 1,
},
{
text: ‘北京’,
value: 2,
},
{
text: ‘上海’,
value: 3,
},
{
text: ‘广州’,
value: 4,
},
{
text: ‘成都’,
value: 5,
},
{
text: ‘重庆’,
value: 6,
},
{
text: ‘武汉’,
value: 7,
},
{
text: ‘杭州’,
value: 8,
}
];
render() {
const {navigate,goBack} = this.props.navigation;
return (
<View style={styles.container}>
<ScrollView>
<InfoItem title={‘出生年月’}
onSelected={(item, index) => this.setState({ageItemsValue:
item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.ageItemsValue}
items={this.ageItems}
prompt={‘选取出生年月’}
/>
<InfoItem title={‘性别’}
onSelected={(item, index) => this.setState({customItemsValue:
item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.customItemsValue}
items={this.customItems}
prompt={‘选取性别’}/>
<InfoItem title={‘城市’}
onSelected={(item, index) => this.setState({cityItemsValue:
item.value})}
getItemValue={(item, index) => item.value}
getItemText={(item, index) => item.text}
value={this.state.cityItemsValue}
items={this.cityItems}
prompt={‘接纳城市’}/>
<TouchableOpacity
onPress={() => {
goBack()
}}
style={styles.pcTextView}>
<Text style={styles.pcText}>保存</Text>
</TouchableOpacity>
</ScrollView>
</View>
)

}
class Second extends Component{
static navigationOptions =({navigation})=>( {
title:Chat with ${navigation.state.params.user},
});
render(){
const {params} = this.props.navigation.state;
return(
<Text>chat with {params.user}</Text>
);
}
}
const App = StackNavigator({
Home:{screen:HomeScreen},
Sec:{screen:Second}
});

}
}

var screenWidth =Dimensions.get(‘window’).width;
const styles = StyleSheet.create({

class InfoItem extends Component {
render() {
return (
<View style={styles.bigView}>
<View style={styles.lineView}>
<Text>
{this.props.title}
</Text>
<Select
style={{width: 200, backgroundColor: ‘#fff’, borderColor: ‘#999’}}
value={this.props.value}
valueStyle={{flex: 1, color: ‘#000’, textAlign: ‘right’}}
items={this.props.items}
getItemValue={this.props.getItemValue}
getItemText={this.props.getItemText}
iconTintColor=’#000’//上下剑头的颜色
placeholder={this.props.prompt}//框内提示文字
pickerTitle={this.props.title}//弹出框标题
onSelected={this.props.onSelected}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#F0F0F0’
},
bigView:{
backgroundColor:”#fff”,
borderColor:”#999″,
borderStyle:”solid”,
borderBottomWidth:1,
},
lineView:{
width:width0.9,
marginLeft:width
0.05,
height:50,
flexDirection:”row”,
alignItems:”center”,
justifyContent:”space-between”,
},
pcTextView:{
backgroundColor:”#ff6600″,
width:width,
height:50,
borderRadius:25,
alignItems:”center”,
justifyContent:”center”,
marginTop:20,
},
pcText:{
color:”#fff”,
fontSize:16,
}
});

container:{
    flex:1,
    marginTop:20,

},
text:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    textAlign:'center',
    backgroundColor:'red',
},

});

AppRegistry.registerComponent(‘AwesomeProject’, () => App);
···

网站地图xml地图