【稀饭】react native 实战系列教程之Navigator实现页面跳转

最新推荐文章于 2024-08-12 15:53:55 发布

置顶

画虎烂

最新推荐文章于 2024-08-12 15:53:55 发布

阅读量3.7k

点赞数 1

分类专栏： React Native 【稀饭】react native 实战系列教程文章标签： react native 项目实战实战教程

本文链接：https://blog.csdn.net/it_talk/article/details/52574582

版权

本文是React Native实战教程的一部分，讲解如何使用Navigator组件进行页面跳转。首先介绍了主界面的开发，包括底部TabBar的创建和内容页面的添加。接着详细阐述了Navigator的配置和使用，包括定义路由数据结构、实现页面渲染和动画效果。文章还讨论了Navigator放置位置的重要性，以避免页面跳转时出现意外问题。最后，通过实例展示了页面跳转的实现，包括从HomeScene到DramaDetailScene的跳转，并处理了Android的物理返回键事件。

摘要由CSDN通过智能技术生成

主界面开发

上一节，我们已经完成了首页的开发，现在，我们继续完成主界面的开发，就是添加底部‘首页’和‘我的’两个tabbar。

在js/文件夹下，新建MainScene.js文件

import React,{Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
}from 'react-native';

export default class MainScene extends Component{
    constructor(props){
        super(props);
        this.state={
            tabIndex:0,
        }

    }

    render(){
        return(
            <View style={
     {flex:1,justifyContent:'flex-end'}}>

                <View style={
     {backgroundColor:'#d5d5d5',height:1,}}/>
                <View style={
     {height:55,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                    <TouchableOpacity style={
     {flex:1}} activeOpacity={0.6} onPress={this._onTabPress.bind(this,0)}>
                        <View style={styles.ItemView}>
                            <Image
                                style={
     {height:30,width:30}}
                                source={this.state.tabIndex==0?require('../img/icon_home_select.png'):require('../img/icon_home_unselect.png')}
                            />
                            <Text style={this.state.tabIndex==0?styles.TabTextSelect:styles.TabTextUnSelect}>首页</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={
     {flex:1}} activeOpacity={0.6} onPress={this._onTabPress.bind(this,1)}>
                        <View style={styles.ItemView}>
                            <Image
                                style={
     {height:30,width:30}}
                                source={this.state.tabIndex==0?require('../