• react-native init安装指定版本的react-native


    C:UsersHONGZHENHUAimooc_gpindex.js

    index.js

    /** @format */
    import React,{ Component } from 'react';
    import {AppRegistry,StyleSheet,Image,Text,View} from 'react-native';
    import App from './App';
    import {name as appName} from './app.json';
    import TabNavigator from 'react-native-tab-navigator';
    export default class imooc_gp extends Component {
        constructor(props){
            super(props);
            this.state={
                selectedTab:'home',
            }
        }
        render(){
    
            return (
                <View style={styles.container}>
                    <TabNavigator>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'home'}
                            title="Home"
                            renderIcon={() => <Image source={require('./res/images/ic_polular.png')} />}
                            renderSelecte
                            dIcon={() => <Image source={require('./res/images/ic_polular.png')} />}
                            badgeText="1"
                            onPress={() => this.setState({ selectedTab: 'home' })}>
                            {homeView}
                            <View style={styles.page1}></View>
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === 'profile'}rea
                            title="Profile"
                            renderIcon= {() => <Image source = {require('./res/images/ic_trending.png')}/>}
                            renderSelectedIcon = {() => <Image source = {require('./res/images/ic_trending.png')} />}
                            renderBadge = {() => <CustomBadgeView/> }
                            onPress = {() => this.setState({selectedTab: 'profile'})}>
                            {
                                profileView
                            }
                            <View style={styles.page2}></View>
                        </TabNavigator.Item>
                    </TabNavigator>
                </View>
            );
        }
    }
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        page1:{
            flex:1,
            backgroundColor: 'red',
    
        },
        page2:{
            flex:1,
            backgroundColor:'yellow',
        }
    });
    
    
    AppRegistry.registerComponent('imooc_gp', () => imooc_gp);

    C:UsersHONGZHENHUAimooc_gppackage.json

    package.json

    {
      "name": "imooc_gp",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
      },
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.4",
        "react": "16.3.1",
        "react-native": "0.55.4",
        "react-native-tab-navigator": "^0.3.4"
      },
      "devDependencies": {
        "babel-jest": "23.6.0",
        "babel-preset-react-native": "4.0.1",
        "jest": "23.6.0",
        "react-test-renderer": "16.3.1"
      },
      "jest": {
        "preset": "react-native"
      }
    }

  • 相关阅读:
    Core2.0知识整理
    bootbox.js官方文档
    MongoDB分片详解
    MongoDB高可用集群+MMS集群监控搭建
    使用 AcceptTcpClientAsync 进行 异步 操作
    Windows证书操作
    SQL Server查询所有的表名、字段名、注释
    【转载】ASP.NET Core Web 支付功能接入 微信-扫码支付篇
    【转载】ASP.NET Core Web 支付功能接入 支付宝-电脑网页支付篇
    C#网络编程系列文章
  • 原文地址:https://www.cnblogs.com/ZHONGZHENHUA/p/10120970.html
Copyright © 2020-2023  润新知