您的位置：首页 > Web前端 > React

界面跳转

2017-08-31 00:00 141 查看

摘要: stack就是堆起来的意思——什么东西堆起来？——所有的页面堆起来
所以整个app只有一个stacknavigator，不是一个页面做一个stack

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

import React, { Component } from 'react';
import {
AppRegistry, Button,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import MainScreen from './src/MainScreen';
import ProfileScreen from './src/ProfileScreen'
export default class Tmic extends Component {
static navigationOptions ={
title:'Tmic',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>

<Button title='Tmic'
onPress={()=>{
navigate('Main')
}}></Button>

</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
const SimpleApp = StackNavigator({
Home:{screen:Tmic},
Main:{screen:MainScreen},
Pro:{screen:ProfileScreen},
})

AppRegistry.registerComponent('Tmic', () => SimpleApp);

import React, { Component } from 'react';
import {Button} from "react-native";

export default class MainScreen extends Component{
render(){
const { navigate } = this.props.navigation;
return(

<Button title='MainScreen'

onPress={()=>{
navigate('Pro');
}}
></Button>
);
}
}

import React, { Component } from 'react';
import {Text} from "react-native";
export default class ProfileScreen extends Component{

render(){
return(

<Text>6666666666</Text>

);
}

}

实现三个页面的跳转

记得在项目根目录下添加：

1,

npm install --save react-navigation

2，

yarn add react-navigation

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React Native 页面跳转基础

相关文章推荐

新的分享

章节导航