美文网首页
react-navigation学习笔记六：路由混合使用

react-navigation学习笔记六：路由混合使用

作者: ghost__ | 来源:发表于2018-11-05 14:25 被阅读67次

推荐看看两篇官网文章：
状态栏相关设置
隐藏底部标签TabBar及导航的解析

正题，没写demo。复制粘贴就好

搭建demo使用相关版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"
结构图.png

模块相关：

入口app.js：
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import React, {Component} from 'react';
import {Dimensions} from 'react-native';
import {
    createDrawerNavigator,
    createSwitchNavigator,
    createBottomTabNavigator,
    createStackNavigator
} from 'react-navigation';
import Login from './login';
import Regis from './regis';
import Home from './home';
import HomeDetail from './homeDetail';
import HomeDetailLittlemoudle from './homeDetailLittlemoudle';
import Record from './record';
import RecordDetail from './recordDetail';
import RecordDetailLittlemoudle from './recordDatailLittlemoudle';
import Setting from './setting';
import AboatAPP from './aboatAPP';

const start = 'isNotLogin';
var tabBarHeight = 50;

//隐藏tabar
const hiddleTabBar = (moudle)=>{
    moudle.navigationOptions = ({ navigation }) => {
        let tabBarVisible = true;
        if (navigation.state.index > 0) {
            tabBarVisible = false;
        }
        return {
            tabBarVisible,
        };
    };
}

//主模块
const HomeMoudle = createStackNavigator(
    {
        H: {
            screen: Home
        },
        HD: {
            screen: HomeDetail,
        },
        HDL: {
            screen: HomeDetailLittlemoudle
        }
    }, {
        initialRouteName: 'H',
    }
)
hiddleTabBar(HomeMoudle)

const RecordMoudle = createStackNavigator(
    {
        R: {
            screen: Record
        },
        RD: {
            screen: RecordDetail
        },
        RDL: {
            screen: RecordDetailLittlemoudle
        }
    }, {
        initialRouteName: 'R',
    }
)
hiddleTabBar(RecordMoudle)

const MainMoudle = createBottomTabNavigator(
    {
        HomeMoudle: {
            screen: HomeMoudle
        },
        RecordMoudle: {
            screen: RecordMoudle
        }
    }, {
    }
)


//设置 关于
const DrawModul = createDrawerNavigator(
    {
        MAIN: {
            screen: MainMoudle
        },
        Set: {
            screen: Setting
        },
        AboatAPP: {
            screen: AboatAPP
        }
    }, {
        initialRouteName: 'MAIN',
        drawerWidth:Dimensions.get('window').width,
        navigationOptions:{
            drawerLockMode:'locked-open'
        }
    }
)



//登录 注册
const LoginRegisMoudle = createSwitchNavigator(
    {
        LOGIN: {
            screen: Login
        },
        REGIS: {
            screen: Regis
        },
        DRAW: {
            screen: DrawModul
        }
    }, {
        initialRouteName: start != "isLogin" ? 'DRAW' : 'LOGIN'
    }
)


//入口
export default class app extends React.Component {
    render() {
        return (
            <LoginRegisMoudle/>
    )
    }
}
login.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is login</Text>
                <Button
                    style={styles.btn}
                    title={'登录'}
                    onPress={()=>{
                        this.props.navigation.navigate('DRAW');
                    }}
                ></Button>
                <Button
                    style={styles.btn}
                    title={'注册账号'}
                    onPress={()=>{
                        this.props.navigation.navigate('REGIS');
                    }}
                ></Button>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
regis.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is regis</Text>
                <Button
                    style={styles.btn}
                    title={'注册成功 返回登录'}
                    onPress={()=>{
                        this.props.navigation.navigate('LOGIN');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 15,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
setting.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is setting</Text>
                <Button
                    style={styles.btn}
                    title={'返回'}
                    onPress={()=>{
                        this.props.navigation.goBack();
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
aboatAPP.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is aboatAPP</Text>
                <Button
                    style={styles.btn}
                    title={'返回'}
                    onPress={()=>{
                        this.props.navigation.navigate('MAIN');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
record.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is record</Text>
                <Button
                    style={styles.btn}
                    title={'侧边栏'}
                    onPress={()=>{
                        this.props.navigation.openDrawer();
                    }}
                ></Button>
                <Button
                    style={styles.btn}
                    title={'查看详情'}
                    onPress={()=>{
                        this.props.navigation.push('RD');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
recordDetail.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    static navigationOptions = {
        tabBarVisible: true,
        title:'标题',
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is recordDetail</Text>
                <Button
                    style={styles.btn}
                    title={'查看小模块'}
                    onPress={()=>{
                        this.props.navigation.push('RDL');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
recordDetailLittlemoudle.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is recordDetailLittlemoudle</Text>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
home.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is home</Text>
                <Button
                    style={styles.btn}
                    title={'侧边栏'}
                    onPress={()=>{
                        this.props.navigation.openDrawer();
                    }}
                ></Button>
                <Button
                    style={styles.btn}
                    title={'查看详情'}
                    onPress={()=>{
                        this.props.navigation.push('HD');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
homeDetail.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is homeDetail</Text>
                <Button
                    style={styles.btn}
                    title={'查看小模块'}
                    onPress={()=>{
                        this.props.navigation.push('HDL');
                    }}
                ></Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})
homeDetailLittlemoudle.js
import React, {Comoponent} from 'react';
import {
    StyleSheet,
    View,
    Text,
    StatusBar
} from 'react-native';

export default class nav2 extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>this is homeDetailLittlemoudle</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: 'red',
        backgroundColor: 'pink',
        fontSize: 25,
    },
    btn: {
        backgroundColor: 'red',
        color: 'blue',
        width: 200,
        height: 44,
        marginTop: 15,
    }
})

相关文章

网友评论

      本文标题：react-navigation学习笔记六：路由混合使用

      本文链接：https://www.haomeiwen.com/subject/mlrsxqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|react-navigation学习笔记六：路由混合使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！