资讯专栏INFORMATION COLUMN

react-native 入门基础介绍

andycall / 2116人阅读

摘要:一个简单的,用于介绍相关基础信息,主要是针对有兴趣的同学参考以下内容及代码在测试有效。本文不介绍安装模拟器的开发方式,需要的请自行。路由组件使用组件使用入口首页使用侧滑路由组件,默认显示路由为对象的第一个属性值。

[toc]

一个简单的demo,用于介绍react-native相关基础信息,主要是针对有兴趣的同学参考;以下内容及代码在2018-08测试有效。

完整项目代码:https://github.com/NameHewei/react-native

安装

npm install -g create-react-native-app

create-react-native-app you-app-name

cd you-app-name

npm start

download Expo app:https://expo.io/(可能要注册)在手机上安装

扫描 npm start 后显示的二维码

为了项目顺利,请备好梯子!

这里是通过在手机上安装Expo,然后用Expo扫描启动项目后生成的二维码来预览你的react-native项目,前提是PC的IP要与手机的IP在同一个网段内。Expo打包你的项目后,每次PC端Ctrl+S都会自动更新Expo的内容。本文不介绍安装模拟器的开发方式,需要的请自行Google。

项目 主要目录结构
|—— app.js
|—— view
  |—— Home.js
    |—— cookbook
        |—— Cookbook.js
        |—— Detail.js
        |—— List.js
    |—— novel
        |—— Novel.js

以下所有涉及组件属性请参考文章最后官网链接进行查看,本文只对关键属性作说明。

路由组件使用:react-native

UI组件使用:native-base

入口
export default createDrawerNavigator({
    home: {
        screen: Home
    },
    novel: {
        screen: Novel
    },
    cookbook: {
        screen: Cookbook
    },
}, {
    drawerBackgroundColor: "#ffffff",
    contentOptions: {
        activeTintColor: "#e91e63",
    }
});

首页使用侧滑(createDrawerNavigator)路由组件,默认显示路由为对象的第一个属性值。

Home模块
export default class Home extends Component {
    static navigationOptions = {
        drawerLabel: "Home",
        drawerIcon: ({ tintColor }) => (
            
        ),
    };

    render() {
        return (    
            
                
                     this.props.navigation.openDrawer() }>
                        
                     
                
            
        );
    }
}

该页面主要是首屏显示内容,根据页面代码注意以下三点:

图片链接要用TouchableHighlight

使用navigation.openDrawer()方法打开侧滑

图片地址要用require(url)方法引入

Coobook模块
const navigationConfig = {
    header: null
}

export default App = createStackNavigator({
    List: {
        screen: List,
        path: "list/:id",
        navigationOptions: (navigation) => (navigationConfig)
    },
    Detail: { 
        screen: Detail,
        navigationOptions: (navigation) => ({
            title: "详情"
        })
    },
})

cook模块功能是提供一个列表页,点击列表项进入详情页,注意以下三点:

用createStackNavigator路由组件实现。

List 页面不需要顶部的header所以设置为null(具体参见文档)

因为详情页需要id这里可以用list/:id传参

List模块
export default class ListComponent extends Component {
    render() {
        return (    
            
                
                    
                        
                             {
                                this.props.navigation.navigate("Detail", {
                                    id: 0
                                })
                            }}>
                                
                                    
                                
                                
                                    回锅肉
                                    一道好吃到板的菜
                                
                                
                                    2018-08-21
                                
                            
                    
                    
                

            

        );
    }
}

该组件用到了native-base UI组件

注意以下四点:

注意组件只能用提供的,style的属性也是只能用提供的。

顶部菜单栏高为20 ,所有宽高都不需要加单位,会自动转化为设备单位

文字必须要用Text包裹

路由跳转由navigation.navigate("name", params)实现

novel模块
export default createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: () => ({
            tabBarVisible : true,
            title: "蚂蚁国度",
            headerBackTitle: null
        }), 
    },
    Settings: {
        screen: SettingsScreen,
        navigationOptions: () => ({
            tabBarVisible : true,
            title: "最强神级兵王",
            headerBackTitle: null
            }),
    },
    }, {
        headerMode: "screen",
    });

该模块采用在底部点击菜单按钮的形式来查看不同小说,所以采用新的路由方式:

使用createBottomTabNavigator切换screen

页面内容多需要滑动,需用ScrollView组件包裹

相关参考

RN官网:https://facebook.github.io/re...

React Navigation官网: https://reactnavigation.org/

nativeBase组件:https://nativebase.io/

若有疑问或错误,请指正,谢谢!Github blog issues

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98367.html

相关文章

  • react-native-art-绘图入门

    摘要:在中是个非常重要的库,它让非常酷炫的绘图及动画变成了可能。于是决定出这样一份入门文档及可能遇到的坑,希望能够帮助到大家。右键点击项目选择将添加到基础组件暴露的组件有个,这篇用到的有五个。 在React Native中ART是个非常重要的库,它让非常酷炫的绘图及动画变成了可能。但是可能是知道的人真的不多导致文档及少中文更少。很多都是把英文的参数列表翻译过来,也没有案例。于是决定出这样一份...

    raise_yang 评论0 收藏0
  • 前端补集 - 收藏集 - 掘金

    摘要:原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目,代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章,恰好今天专栏开通,迁移过来。 破解前端面试(80% 应聘者不及格系列):从闭包说起 - 掘金修订说明:发布《80% 应聘者都不及格的 JS 面试题》之后,全网阅读量超过 6W,在知乎、掘金、cnodejs ...

    YorkChen 评论0 收藏0
  • 前端补集 - 收藏集 - 掘金

    摘要:原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目,代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章,恰好今天专栏开通,迁移过来。 破解前端面试(80% 应聘者不及格系列):从闭包说起 - 掘金修订说明:发布《80% 应聘者都不及格的 JS 面试题》之后,全网阅读量超过 6W,在知乎、掘金、cnodejs ...

    AbnerMing 评论0 收藏0
  • 从 1 到完美,用 js 和 react-native 写一个 APP

    摘要:从到完美,用和写一个在年开源了后,紧接着在年就又开源了,就此打开了用和前端技术写原生之路。对应来看,程序只有两个部分,和,而部分则分为组件和。所以,在端的纯库无在中同样适用,如等。应用实例便是使用开发的一个日记。 从 1 到完美,用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后,紧接着在 2015 年就又开源了 react...

    CollinPeng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<