为React Native项目配置Navigator（路由）

2017-03-11 本文已影响0人郑在Coding

此文章只适合新手，老司机如有宝贵意见请多提。

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}/>
                }}/>
        );
    }
}

注释意见写得很清楚了，就不啰嗦了。

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](https://img.haomeiwen.com/i4416446/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](https://img.haomeiwen.com/i4416446/2c1b7115e00c2078.gif?imageMogr2/auto-orient/strip)
github会随着更新而更新[https://github.com/LinsanityZ/EnjoyGossip](https://github.com/LinsanityZ/EnjoyGossip)
如有不完善地方，欢迎讨论

为React Native项目配置Navigator（路由）

App

Home

猜你喜欢

热点阅读