hellochange
hellochange

react-native从项目搭建到发布上线项目实战(基于expo)

项目结构

|-- 项目结构
    |-- .gitignore
    |-- app.json
    |-- App.tsx
    |-- babel.config.js
    |-- images.d.ts
    |-- package-lock.json
    |-- package.json
    |-- tsconfig.json
    |-- yarn.lock
    |-- .expo-shared
    |   |-- assets.json
    |-- assets
    |   |-- icon.png
    |   |-- splash.png
    |   |-- images
    |       |-- cookbook-active.png
    |       |-- cookbook.png
    |       |-- location-active.png
    |       |-- location.png
    |       |-- menu-active.png
    |       |-- menu.png
    |       |-- more-active.png
    |       |-- more.png
    |       |-- search.png
    |       |-- swiper-1.png
    |       |-- swiper-2.jpeg
    |       |-- swiper-3.jpeg
    |-- context
    |   |-- navigation.js
    |-- mock
    |   |-- cookbook-category.json
    |   |-- cookbook-detail.json
    |   |-- cookbook-hotcate.json
    |   |-- cookbook-list-json.json
    |   |-- cookbook-list.json
    |   |-- mock.js
    |   |-- route.json
    |-- pages
    |   |-- cate
    |   |   |-- Cate.tsx
    |   |   |-- style_cate.js
    |   |-- detail
    |   |   |-- Detail.tsx
    |   |   |-- style_detail.js
    |   |-- home
    |   |   |-- Home.tsx
    |   |   |-- HotCate.tsx
    |   |   |-- style_home.js
    |   |   |-- Swiper.tsx
    |   |   |-- Top10.tsx
    |   |-- index
    |   |   |-- Index.tsx
    |   |   |-- styled_index.js
    |   |   |-- style_index.js
    |   |-- map
    |   |   |-- Map.tsx
    |   |-- more
    |       |-- More.tsx
    |-- store
    |   |-- index.ts
    |-- utils
        |-- http.js

环境搭建

本项目是应用 ReactNative，TypeScript，Mobx等技术开发的一个“美食大全”的项目，基本的环境搭建，大家参照本文基础部分。

expo init rn-cookbooks

然后选择 blank (TypeScript)：

? Choose a template: 
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas 
❯ blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration

启动项目：

cd rn-cookbooks
yarn start

Index组件初始化

在根目录下创建 pages/index 文件夹，在里面创建一个 Index.tsx 文件，编辑内容：

// pages/index/Index.tsx
import React, { Component } from 'react'

import {
  View,
  Text,
  StyleSheet
} from 'react-native'

interface Props {
  
}

interface State {
  
}

export default class Index extends Component {
  constructor(props) {
    super(props)
  }
  
  state: State = {
    
  }

  componentDidMount() {
    
  }

  render() {
    return (
      
        
          Index 组件内容
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

修改根目录下的 App.tsx：

import React from 'react'
import Index from './pages/index/Index'

export default function App() {
  return (
    
  )
}

引入tabbar导航器

在项目环境命令行里安装 tabbar 导航器，详细内容可参见 react-native-tab-navigator 官网

yarn add react-native-tab-navigator -S

修改 index.tsx, 引入 tab-navigator 代码：

import React, { Component } from 'react'
import TabNavigator from 'react-native-tab-navigator'

import {
  View,
  Text
} from 'react-native'

import {
  Img
} from './styled_index'
import styles from './style_index'

import cookbook from '../../assets/images/cookbook.png'
import cookbookActive from '../../assets/images/cookbook-active.png'
import category from '../../assets/images/menu.png'
import categoryActive from '../../assets/images/menu-active.png'
import map from '../../assets/images/location.png'
import mapActive from '../../assets/images/location-active.png'
import more from '../../assets/images/more.png'
import moreActive from '../../assets/images/more-active.png'

interface Props {

}

interface State {
  selectedTab: string
}

class Index extends Component {
  constructor(props: Props) {
    super(props)
  }

  state: State = {
    selectedTab: 'home'
  }

  componentDidMount() {

  }

  render() {
    return (
      
         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({ selectedTab: 'home' })}
        >
          {美食大全}
        
         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({ selectedTab: 'category' })}
        >
          {分类}
        
         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({ selectedTab: 'map' })}
        >
          {地图}
        
         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({ selectedTab: 'more' })}
        >
          {更多}
        
      
    )
  }
}

export default Index

问题：

  • ts 提示引入的 png 不能识别，飘红了。解决方案是在项目跟目录下创建 images.d.ts 文件，内容如下：
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

在 pages/index 下创建样式文件：

下面使用两种形式书写样式表，到时候自行开发按需选择
  • 安装 styled-components 模块
npm i styled-components -D
  • 创建 styled_index.js, 内容如下：
import styled from 'styled-components'

const Img = styled.Image `
  width: 25px;
  height: 25px;
`

export {
  Img
}

再创建一个样式文件 style_index.js, 内容如下：

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  titleStyle: {
    color: '#666'
  },
  
  tabBarStyle: {
    paddingBottom: 34, 
    height: 80
  },

  selectedTitleStyle: {
    color: '#000'
  }
})

tabbar 的兼容处理

安装 expo-device

npm i expo-device -S

修改 index.ts, 根据您设备情况引入不同的样式，此处只是测试性代码，只做了iphone XR 和 其他非 “齐刘海” iPhone 手机：

// 载入模块
import * as Device from 'expo-device'

// 在 TabNavigator 上修改 tabBarStyle

搭建antd-mobile-rn环境

在开始之前，推荐先学习 React 和 ES2015。使用了 babel，试试用 ES2015 的写法来提升编码的愉悦感。

确认 Node.js 已经升级到 v4.x 或以上。

1. 创建一个项目

可以是已有项目，或者是使用 create-react-native-app 新创建的空项目，你也可以从 官方示例 脚手架里拷贝并修改

参考更多 官方示例集
或者你可以利用 React 生态圈中的 各种脚手架

完整步骤请查看此处文档： antd-mobile-sample/create-react-native-app

2. 安装

npm install @ant-design/react-native --save

or

yarn add @ant-design/react-native

链接字体图标

react-native link @ant-design/icons-react-native

3. 使用

按需加载

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

  • 使用 babel-plugin-import（推荐）。

    // .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "@ant-design/react-native" }] // 与 Web 平台的区别是不需要设置 style
  ]
}

    然后改变从 @ant-design/react-native 引入模块方式即可。

    import { Button } from '@ant-design/react-native';

创建Home组件

在项目根目录下创建 pages/home 文件夹，在这个文件夹下创建 Home.tsx 文件，内容如下：

import React, { Component } from 'react'
import Swiper from './Swiper'
import HotCate from './HotCate'

interface Props {

}

interface State {
  
}

class Home extends Component {
  render() {
    return (
      <>
        
        
      
    )
  }
}

export default Home

此时在 Home.tsx 中引入 Swiper 和 HotCate 两个组价。

创建Swiper组件

在根目录下创建 utils 文件夹，在这个文件夹里创建 http.js 文件，内容如下：

// utils/http.js
export const get = (url) => {
  return fetch(url, {
    method: 'get'
  })
  .then(response => response.json())
  .then(result => {
    return result.data
  })
}

在 pages/home 文件夹里再创建一个 Swiper.tsx 组件，内容如下：

import React, { Component } from 'react'
import { Carousel } from '@ant-design/react-native'
import { get } from '../../utils/http'

import {
  View,
  Image
} from 'react-native'

import styles from './style_home'

interface Props {

}

interface State {
  list: Array
}

class Swiper extends Component {
  state = {
    list: []
  }
  async componentDidMount() {
    let list = await get('http://localhost:9000/api/swiper')
    this.setState({
      list
    })
  }

  render() {
    return (
      
        {
          this.state.list.slice(0, 5).map((value, index) => {
            return (
              
                
              
            )
          })
        }
      
    )
  }
}

export default Swiper

在 page/home 文件里创建 style_home.js 文件，编辑样式如下：

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  // swiper
  wrapper: {
    height: 170
  },

  containerHorizontal: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 170
  },

  slideImg: {
    height: 170,
    width: '100%'
  },
})

创建HotCate组件

在 pages/home 文件夹里构建 HotCate.tsx 文件，内容为：

import React, { Component } from 'react'
import { Grid } from '@ant-design/react-native'
import { get } from '../../utils/http'

import styles from './style_home'

import {
  View,
  Text,
  Image,
  StyleSheet
} from 'react-native'

interface Props {
  
}
interface State {
  hotCate: Array
}

export default class HotCate extends Component {
  state = {
    hotCate: []
  }

  _renderItem(el, index) {
    return (
      
        {el.img ?  : null}
        {el.title}
      
    )
  }

  async componentDidMount() {
    let hotCate = await get('http://localhost:9000/api/hotcate')

    // 补全最后一项数据
    hotCate.push({
      img: '',
      title: '更多...'
    })

    this.setState({
      hotCate
    })
  }

  render() {
    return (
      
        
      
    )
  }
} 
 
修改 pages/home/style_home.js 文件，样式如下：
 
 
import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  // hotcate
  container: {
    paddingTop: 20,
    paddingBottom: 10
  },

  gridContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  gridText: {
    fontSize: 16,
    margin: 6
  },

  gridImg: {
    width: 70,
    height: 70,
    borderRadius: 5
  },
})
 
 
 
  
创建Top10组件
 
  
Top10组件渲染的数据和Swiper组件可以使用同一个接口的数据，因此我们决定应用Mobx来管理这个数据。
 
 
 
 
安装 Mobx 相关模块
 
 
npm i mobx mobx-react -S
 
 
构建 store
 
 
在项目根目录下创建 store 文件夹，在这个文件下创建 index.js 文件：
 
 
// store/index.js
import {
  observable,
  action,
  computed
} from 'mobx'

class Store {
  // swiper 与 top10 共享的数据
  @observable
  list = []

  // swiper 数据过滤
  @computed
  get swiper() {
    return this.list.slice(0, 5).map((value, index) => {
      return {
        img: value.img
      }
    })
  }

  // top10 数据过滤
  @computed
  get top10() {
    return this.list.slice(0, 10).map((value, index) => {
      return {
        img: value.img,
        all_click: value.all_click,
        favorites: value.favorites,
        name: value.name
      }
    })
  }

  // 装载 list 数据
  @action.bound
  setList(data) {
    this.list = data
  }  
}

export default new Store()
 
 
开始构建 Top.tsx 组件
 
 
在 pages/home 下创建 Top.tsx  文件：
 
 
// pages/home/Top.tsx
import React, { Component } from 'react'
import { Grid } from '@ant-design/react-native'
import { observer, inject } from 'mobx-react'

import {
  View,
  Text,
  Image
} from 'react-native'

import styles from './style_home.js'

interface Props {
  // store 作为组件的 props
  store?: any
}

interface State {
  
}

// 注入 store 与 将类变为可观察的对象
@inject('store')
@observer
class Top10 extends Component {

  renderTop10(el, index) {
    return (
      
        
          
        
        
          {el.name}
          {el.all_click} {el.favorites}
        
      
    )
  }

  render() {   
    return (
      
        
          精品好菜
        
        
          
        
      
    )
  }
}

export default Top10
 
 
注意：expo-cli 构建的项目，默认 ts 配置不支持装饰器，会给出如下警告：
 
 
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
 
 
需要修改项目根目录下的 tsconfig.json，添加：
 
 
"experimentalDecorators": true
 
 
如果不能起作用，重新启动VSCode即可。
 
 
添加 top10 样式
 
 
// pages/home/style_home.js
import { StyleSheet } from 'react-native'
export default StyleSheet.create({
  // top10
  top10Container: {
    paddingBottom: 44,
    backgroundColor: '#eee'
  },

  top10Head: {
    height: 50,
    paddingLeft: 10,
    justifyContent: 'flex-end',
  },

  top10HeadText: {
    fontSize: 18
  },

  top10ItemContainer: {
    flex: 1,
    paddingRight: 10
  },

  top10DesContainter: {
    marginLeft: 10,
    paddingTop: 10,
    paddingBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },

  top10ImgContainer: {
    paddingLeft: 10,
    paddingTop: 10,
    flex: 1
  },

  Top10Img: {
    width: '100%',
    height: '100%',
  },

  top10Titie: {
    fontSize: 20
  },

  Top10Desc: {
    color: '#666'
  }
})
 
 
 
  
更改Swiper和Home组件
 
  
Swiper 组件和 Top10 组件共享了数据，因此在 store 构建好后，需要改造一下：
 
 
 
 
// pages/home/Swiper.tsx
import React, { Component } from 'react'
import { Carousel } from '@ant-design/react-native'
import { get } from '../../utils/http'

import { observer, inject } from 'mobx-react'

import {
  View,
  Image
} from 'react-native'

import styles from './style_home'

interface Props {
  // store 作为组件的 props
  store?: any
}

interface State {
  
}

// 注入 store 与 将类变为可观察的对象
@inject('store')
@observer
class Swiper extends Component {
  state = {
    list: []
  }
  async componentDidMount() {
    let list = await get('http://localhost:9000/api/swiper')
    this.props.store.setList(list)
  }

  render() {
    return (
      
        {
          this.props.store.swiper.map((value, index) => {
            return (
              
                
              
            )
          })
        }
      
    )
  }
}

export default Swiper
 
 
改造 Home.tsx 组件
 
 
在 Home.tsx 组件引入 Top10 组件，同时添加 ScrollView 组件，实现页面滚动效果。
 
 
// page/home/Home.tsx

import React, { Component } from 'react'
import { ScrollView } from 'react-native'

import Swiper from './Swiper'
import HotCate from './HotCate'
import Top10 from './Top10'

interface Props {

}

interface State {
  
}

class Home extends Component {
  render() {
    return (
      
        
        
        
      
    )
  }
}

export default Home
 
 
 
  
创建List组件
 
  
接下来构建另一个页面，首先在 pages 目录下创建 list 文件夹，在此文件夹里创建 List.tsx 组件文件和 style_list.js 样式文件。
 
 
 
 
List.tsx
 
 
// pages/list/List
import React, { Component, createRef } from 'react'

import {
  inject,
  observer
} from 'mobx-react'

import {
  View,
  Text,
  Image,
  FlatList
} from 'react-native'

import styles from './style_list'

interface Props {
  store?: any
}

interface State {
  // 记录上拉加载更多的当前页码
  curPage: number, 

  // 页面显示的数据
  datalist: Array, 

  // 控制下拉刷新的开关
  refresh: boolean 
}

let pageSize = 10

@inject('store')
@observer
export default class List extends Component {
  constructor (
    public props: Props, 
    public flatlist,
  ) {
    super(props)
    this.flatlist = createRef()
  }

  state = {
    curPage: 1,
    datalist: [],
    refresh: false
  }

  // 渲染 Flatlist 组件数据
  _renderItem(item) {
    let {img, name, burdens, all_click, favorites} = item.item.data   
    return (
      
        
          
        
        
          {name}
          {burdens}
          {all_click} {favorites}
        
      
    )
  }

  // 处理用户拉到底端的响应函数
  _handleReachEnd() {
    // 如果还有数据，一直加载
    if (this.state.curPage < Math.ceil(this.props.store.list.length / pageSize)) {
      this.setState((state) => {
        return {
          curPage: state.curPage + 1
        }
      }, () => {
        this._loadData()
      })
    }
  }

  // 下拉刷新的响应函数
  _handleRefresh() {
    this.setState({
      refresh: true
    })

    // 此处可以异步获取后端接口数据，具体实现思路见上拉加载。
    setTimeout(() => {
      this.setState({
        refresh: false
      })
    }, 2000)
  }

  // 加载数据
  // 注：这里的 key: value.id 由于模拟接口会出现重复的情况
  _loadData() {
    let data = this.props.store.list.slice(0, this.state.curPage * pageSize)
    let flatListData = data.map((value, index) => ({
        data: value,
        key: value.id
      })
    )
    this.setState({
      datalist: flatListData
    })
  }

  // 执行第一次数据加载
  componentDidMount() {
    setTimeout((params) => {
      this._loadData()
    }, 0)
  }

  render() {
    return (
      
    )
  }
} 
 
 style_list.js 样式
 
 
import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  listWrap: {
    flexDirection: 'row',
    padding: 10,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderBottomColor: '#eee'
  },

  imgWrap: {
    width: 135,
    paddingRight: 10
  },

  image: {
    width: 115,
    height: 75
  },

  descWrap: {
    flex: 1
  },

  title: {
    fontSize: 20,
    lineHeight: 30
  },

  subtitle: {
    fontSize: 16,
    color: '#666',
    lineHeight: 30,
    overflow: 'hidden'
  },

  desc: {
    fontSize: 12,
    color: '#666'
  }
})
 
 
 
  
react-navigation
 
  
本项目应用 React Navigation 构建路由系统。
 
 
 
 
安装 React Navigation 环境
 
 
npm install @react-navigation/native

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack
 
 
给App.tsx配置路由
 
 
import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import { Provider } from 'mobx-react'
import store from './store/'

import Index from './pages/index/Index'
import List from './pages/list/List'
import Detail from './pages/detail/Detail'

const Stack = createStackNavigator()

export default function App() {

  // 这里配置了三个页面
  return (
    
      
        
          
          
          
        
      
    
  )
}
 
 
创建 Context
 
 
为了让组件能收到路由的信息，这里我们自己构建了一个 Context。
 
 
在根目录下创建一个context目录，在此目录下创建一个 navigation.js 文件，内容如下：
 
 
// context/navigations.js

import { createContext } from 'react'

const navigationContext = createContext()

let { Provider, Consumer } = navigationContext

export {
  navigationContext,
  Provider,
  Consumer
}
 
 
修改 index.tsx
 
 
1.解构出Provider
 
 
import { Provider } from '../../context/navigation'
 
 
2.通过Context 的Provider，将props递交给后代组件
 
 

  



  

 
 
3.全部内容
 
 
// pages/index/Index.tsx

import React, { Component, ContextType } from 'react'
import TabNavigator from 'react-native-tab-navigator'
import * as Device from 'expo-device'

// 解构出 Provider
import { Provider } from '../../context/navigation'

import {
  View,
  Text
} from 'react-native'

import {
  Img
} from './styled_index'
import styles from './style_index'

import cookbook from '../../assets/images/cookbook.png'
import cookbookActive from '../../assets/images/cookbook-active.png'
import category from '../../assets/images/menu.png'
import categoryActive from '../../assets/images/menu-active.png'
import map from '../../assets/images/location.png'
import mapActive from '../../assets/images/location-active.png'
import more from '../../assets/images/more.png'
import moreActive from '../../assets/images/more-active.png'

import Home from '../home/Home'
import List from '../list/List'
import Detail from '../detail/Detail'

interface Props {
  navigation?: any
}

interface State {
  selectedTab: string
}

class Index extends Component {
  constructor(props: Props) {
    super(props)
  }

  state: State = {
    selectedTab: 'home'
  }


  componentDidMount() {
    
  }

  render() {
    return (
      <>
        
           }
            renderSelectedIcon={() => }
            onPress={() => {
              this.setState({ selectedTab: 'home' })
              this.props.navigation.setOptions({ title: '美食大全' })
            }}
          >
            {/* 通过Context 的Provider，将props递交给后代组件 */}
            
              
            
          
           }
            renderSelectedIcon={() => }
            onPress={
              () => {
                this.setState({ selectedTab: 'category' })
                this.props.navigation.setOptions({ title: '热门' })
              }
            }
          >
            {/* 通过Context 的Provider，将props递交给后代组件 */}
            
              
            
          
           }
            renderSelectedIcon={() => }
            onPress={() => {
              this.setState({ selectedTab: 'map' })
              this.props.navigation.setOptions({ title: '地图' })
            }}
          >
            {地图}
          
           }
            renderSelectedIcon={() => }
            onPress={() => {
              this.setState({ selectedTab: 'more' })
              this.props.navigation.setOptions({ title: '更多' })
            }}
          >
            {更多}
          
        
      
    )
  }
}

export default Index
 
 
修改 home.tsx
 
 
1. 将路由信息传给HotCate
 
 
 
 
2.定义Props
 
 
interface Props {
  navigation?: any
}
 
 
3.全部内容
 
 
// pages/home/Home.tsx

import React, { Component } from 'react'
import { ScrollView, StatusBar } from 'react-native'

import Swiper from './Swiper'
import HotCate from './HotCate'
import Top10 from './Top10'

interface Props {
  navigation?: any
}

interface State {
  
}

class Home extends Component {
  render() {
    return (
      
        
        
        {/* 将路由信息传给HotCate */}
        
        
      
    )
  }
}

export default Home
 
 
修改 HotCate.tsx
 
 
1. 导入
 
 
import { Consumer } from '../../context/navigation'
 
 
2. 路由到“热门”页面
 
 
_onPress = (navigation) => {
  return () => {
    navigation.push('List')
  }
}


  
    {
      ({navigation}) => {
        return (
          
        )
      }
    }
  

 
 
3. 全部代码
 
 
// pages/home/HotCate.tsx

import React, { Component } from 'react'
import { Grid } from '@ant-design/react-native'
import { get } from '../../utils/http'
import { Consumer } from '../../context/navigation'

import styles from './style_home'

import {
  View,
  Text,
  Image
} from 'react-native'

interface Props {
  
}
interface State {
  hotCate: Array
}

export default class HotCate extends Component {
  state = {
    hotCate: []
  }

  _renderItem(el, index) {
    return (
      
        {el.img ?  : null}
        {el.title}
      
    )
  }

  _onPress = (navigation) => {
    return () => {
      navigation.push('List')
    }
  }
  
  async componentDidMount() {
    let hotCate = await get('http://localhost:9000/api/hotcate')

    // 补全最后一项数据
    hotCate.push({
      img: '',
      title: '更多...'
    })

    this.setState({
      hotCate
    })
  }

  render() {
    return (
      
        
          {
            ({navigation}) => {
              return (
                
              )
            }
          }
        
      
    )
  }
} 
 
修改 Top10.tsx
 
 
1. 通过 contextType 定义 context
 
 
import { navigationContext } from '../../context/navigation'
 
 
2. 导航到详情页，并传参
 
 
import { navigationContext } from '../../context/navigation'

static contextType = navigationContext

_onPress = (e) => {
  this.context.navigation.push('Detail', { name: e.name })
}


 
 
3. 全部代码
 
 
// pages/home/Top10.tsx

import React, { Component } from 'react'
import { Grid } from '@ant-design/react-native'
import { observer, inject } from 'mobx-react'
import { navigationContext } from '../../context/navigation'

import {
  View,
  Text,
  Image
} from 'react-native'

import styles from './style_home.js'

interface Props {
  // store 作为组件的 props
  store?: any
}

interface State {
  
}

// 注入 store 与 将类变为可观察的对象
@inject('store')
@observer
class Top10 extends Component {

  static contextType = navigationContext

  _renderTop10(el, index) {
    return (
      
        
          
        
        
          {el.name}
          {el.all_click} {el.favorites}
        
      
    )
  }

  _onPress = (e) => {
    this.context.navigation.push('Detail', { name: e.name })
  }

  render() {   
    return (
      
        
          精品好菜
        
        
          
        
      
    )
  }
}

export default Top10
 
 
修改 List.tsx
 
 
1. 载入路由相关模块，实现路由到详情页的功能，主要代码：
 
 
// 1. 载入Context
import { navigationContext } from '../../context/navigation'

// 2. 在 Props 里定义 navigation
interface Props {
  store?: any,
  navigation?: any
}

// 3. 在类里定义 contextType 静态变量
static contextType = navigationContext

// 4. 在组件类里定义路由跳转响应方法
_onPress = (name: string) => {
  return () => {
    // 鉴于此页面从 TabBar 和 首页两个入口进入
    // 路由跳转的方式也不同
    if (this.context) {
      // 从Tabbar进入
      this.context.navigation.push('Detail', {name})
    } else {
      // 从首页进入
      this.props.navigation.push('Detail', {name})
    }
  }
}

// 5. 应用 TouchableOpacity 组件绑定路由跳转事件

  
    
      
    
    
      {name}
      {burdens}
      {all_click} {favorites}
    
  

 
 
2. 全部代码
 
 
import React, { Component, createRef } from 'react'
import { navigationContext } from '../../context/navigation'

import {
  inject,
  observer
} from 'mobx-react'

import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity
} from 'react-native'

import styles from './style_list'

interface Props {
  store?: any,
  navigation?: any
}

interface State {
  // 记录上拉加载更多的当前页码
  curPage: number, 

  // 页面显示的数据
  datalist: Array, 

  // 控制下拉刷新的开关
  refresh: boolean 
}

let pageSize = 10

@inject('store')
@observer
export default class List extends Component {
  constructor (
    public props: Props, 
    public flatlist,
  ) {
    super(props)
    this.flatlist = createRef()
  }

  state = {
    curPage: 1,
    datalist: [],
    refresh: false
  }

  static contextType = navigationContext

  _onPress = (name: string) => {
    return () => {
      if (this.context) {
        this.context.navigation.push('Detail', {name})
      } else {
        this.props.navigation.push('Detail', {name})
      }
    }
  }
  
  // 渲染 Flatlist 组件数据
  _renderItem(item) {
    let {img, name, burdens, all_click, favorites} = item.item.data   
    return (
      
        
          
            
          
          
            {name}
            {burdens}
            {all_click} {favorites}
          
        
      
    )
  }

  // 处理用户拉到底端的响应函数
  _handleReachEnd() {
    // 如果还有数据，一直加载
    // 加载更多，由于Mock数据问题，有ID重复问题
    // if (this.state.curPage < Math.ceil(this.props.store.list.length / pageSize)) {
    //   console.log(this.state.curPage)
    //   this.setState((state) => {
    //     return {
    //       curPage: state.curPage + 1
    //     }
    //   }, () => {
    //     this._loadData()
    //   })
    // }
  }

  // 下拉刷新的响应函数
  _handleRefresh() {
    this.setState({
      refresh: true
    })

    // 此处可以异步获取后端接口数据，具体实现思路见上拉加载。
    setTimeout(() => {
      this.setState({
        refresh: false
      })
    }, 2000)
  }

  // 加载数据
  _loadData() {
    let data = this.props.store.list.slice(0, this.state.curPage * pageSize)    
    let flatListData = data.map((value, index) => ({
        data: value,
        key: value.id
      })
    )
    this.setState({
      datalist: flatListData
    })
  }

  // 执行第一次数据加载
  componentDidMount() {
    setTimeout((params) => {
      this._loadData()
    }, 0)
  }

  render() {
    return (
      
        
      
    )
  }
} 
 

   
创建详情页
 
  
在路由信息定义好后，就可以构建详情页了。 
 
 
 
Detail.tsx
 
 
// pages/detail/Detail.tsx

import React, { Component } from 'react'
import { get } from '../../utils/http'
import {
  View,
  ScrollView,
  Text,
  Image,
  StatusBar,
  TouchableOpacity,
  Alert
} from 'react-native'

import styles from './style_detail'

interface Props {
  navigation?: any,
  route?: any
}
interface State {
  detail: {}
}

export default class Detail extends Component {
  state = {
    detail: null
  }

  async componentDidMount() {
    let result = await get('http://localhost:9000/api/detail')
    this.setState({
      detail: result
    })
    // 根据路由传递过来参数，修改本页的 title
    this.props.navigation.setOptions({ title: this.props.route.params.name })
  }
  
  render() {
    let detail = this.state.detail
    return (
      <>
        {
          detail && (
            
              
                
                
                
                  
                    {detail.name}
                  
                  
                    {detail.all_click}浏览/{detail.favorites}收藏
                  
                   Alert.alert('已经收藏.')}
                  >
                    
                      收藏
                    
                  
                
                
                  
                    心得
                  
                  
                    
                      {detail.info}
                    
                  

                  
                    做法
                  
                  
                    {
                      detail.makes.map((value) => {
                        return (
                          
                            
                              {value.num} {value.info}
                            
                            
                              
                            
                          
                        )
                      })
                    }
                  
                
              
            
          )
        }
      
    )
  }
}
 
 
style_detail.js 页面样式
 
 
// pages/detail/style_detail.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
    paddingBottom: 34
  },

  // main
    mainImg: {
      width: '100%',
      height: 250
    },

    mainInfo: {
      height: 170,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff'
    },

    mainInfoName: {
      fontSize: 24
    },
    
    mainInfoSubTitle: {
      marginTop: 10,
      fontSize: 12,
      color: '#666'
    },

    // button
    mainInfoButtonWrap: {
      width: 140,
      height: 40,
      backgroundColor: '#df7b42',
      marginTop: 20,
      borderRadius: 6
    },

    mainInfoButton: {
      textAlign: 'center',
      lineHeight: 40,
      color: '#fff',
      fontSize: 16
    },

  // info
    infoWrap: {
      marginTop: 15,
      backgroundColor: '#fff',
      paddingTop: 25,
      paddingLeft: 15,
      paddingBottom: 25
    },
    
    infoTitle: {
      fontSize: 20,
      fontWeight: 'bold',
      marginBottom: 20
    },

    infoText: {
      fontSize: 16,
      lineHeight: 20,
      paddingRight: 20
    },
  
  // makes
    makesTitle: {
      fontSize: 16,
      paddingRight: 30
    },

    makesImg: {
      width: 300,
      height: 210,
      margin: 20
    }
})
 
 
 
  
创建美食地图页
 
  
“美食地图” 主要应用的知识点是 WebView, 根据官网推荐，使用 react-native-webview 项目来实现在RN里嵌入Web页面。
 
 
 
 
模块安装
 
 
npm install --save react-native-webview

react-native link react-native-webview
 
 
Map.tsx 文件构建
 
 
在项目根目录 pages 下创建目录 map, 在 map 目录下创建 Map.tsx 文件，文件内容如下：
 
 
import React, { Component } from 'react'
import { View } from 'react-native'
import { WebView } from 'react-native-webview'

interface Props {
  
}
interface State {
  
}

export default class Map extends Component {
  state = {}

  render() {
    return (
      
        
      
    )
  }
}
 
 
 
  
是否显示地图页签
 
  
更多页面实现了两个功能：
 
 
 
 
1、是否显示地图页签 
 
 
2、拍照功能
 
 
是否显示地图页签
 
 
更新 store
 
 
添加了 isShow 属性，和 setVisible 方法。
 
 
// store/index.js

import {
  observable,
  action,
  computed
} from 'mobx'

class Store {
  // swiper 与 top10 共享的数据
  @observable
  list = []

  // 定义是否显示地图按钮
  @observable
  isShow = true

  // swiper 数据过滤
  @computed
  get swiper() {
    return this.list.slice(0, 5).map((value, index) => {
      return {
        img: value.img
      }
    })
  }

  // top10 数据过滤
  @computed
  get top10() {
    return this.list.slice(0, 10).map((value, index) => {
      return {
        img: value.img,
        all_click: value.all_click,
        favorites: value.favorites,
        name: value.name
      }
    })
  }

  // 装载 list 数据
  @action.bound
  setList(data) {
    this.list = data
  }

  // 修改是否显示地图按钮
  @action.bound
  setVisible(status) {
    this.isShow = status
  }
}

export default new Store()
 
 
添加 More.tsx 文件
 
 
在根目录pages下创建 more 文件夹，再创建 More.tsx 文件，内容如下
 
 
// pages/more/More.tsx

import React, { Component } from 'react'
import { View, Text, Switch, AsyncStorage } from 'react-native'
import { observer, inject } from 'mobx-react'

interface Props {
  store?: any
}

interface State {

}

@inject('store')
@observer
export default class Profile extends Component {
  state = {

  }

  async componentDidMount() {
    
  }

  render() {
    return (
      
        
          
            是否显示地图：
          
           {
              this.props.store.setVisible(value)
              AsyncStorage.setItem('isShow', value.toString())
            }}
          >
        
      
    )
  }
}
 
 
修改 pages/index/Index.tsx 文件
 
 
1、修改代码的要点
 
 
  // 定义 store
  interface Props {
    navigation?: any
    store?: any
  }

  // 记录用户缓存
  async componentDidMount() {
    let isShow = await AsyncStorage.getItem('isShow')
    this.props.store.setVisible(JSON.parse(isShow))
  }

  // 在 tabbar 里修改
  {
    this.props.store.isShow
      ? (
         }
          renderSelectedIcon={() => }
          onPress={() => {
            this.setState({ selectedTab: 'map' })
            this.props.navigation.setOptions({ title: '地图' })
          }}
        >
          
        
      )
      : null
  }
 
 
2. 全部代码
 
 
// pages/index/Index.tsx

import React, { Component, ContextType } from 'react'
import TabNavigator from 'react-native-tab-navigator'
import * as Device from 'expo-device'
import { observer, inject } from 'mobx-react'

import { Provider } from '../../context/navigation'

import {
  View,
  Text,
  AsyncStorage
} from 'react-native'

import {
  Img
} from './styled_index'
import styles from './style_index'

import cookbook from '../../assets/images/cookbook.png'
import cookbookActive from '../../assets/images/cookbook-active.png'
import category from '../../assets/images/menu.png'
import categoryActive from '../../assets/images/menu-active.png'
import map from '../../assets/images/location.png'
import mapActive from '../../assets/images/location-active.png'
import more from '../../assets/images/more.png'
import moreActive from '../../assets/images/more-active.png'

import Home from '../home/Home'
import List from '../list/List'
import Map from '../map/Map'
import More from '../more/More'

interface Props {
  navigation?: any
  store?: any
}

interface State {
  selectedTab: string
}

@inject('store')
@observer
class Index extends Component {
  constructor(props: Props) {
    super(props)
  }

  state: State = {
    selectedTab: 'home'
  }

  async componentDidMount() {
    let isShow = await AsyncStorage.getItem('isShow')
    this.props.store.setVisible(JSON.parse(isShow))
  }

  render() {
    return (
      <>
        
           }
            renderSelectedIcon={() => }
            onPress={() => {
              this.setState({ selectedTab: 'home' })
              this.props.navigation.setOptions({ title: '美食大全' })
            }}
          >
            
              
            
          
           }
            renderSelectedIcon={() => }
            onPress={
              () => {
                this.setState({ selectedTab: 'category' })
                this.props.navigation.setOptions({ title: '热门' })
              }
            }
          >
            
              
            
          
          {
            this.props.store.isShow
              ? (
                 }
                  renderSelectedIcon={() => }
                  onPress={() => {
                    this.setState({ selectedTab: 'map' })
                    this.props.navigation.setOptions({ title: '地图' })
                  }}
                >
                  
                
              )
              : null
          }
           }
            renderSelectedIcon={() => }
            onPress={() => {
              this.setState({ selectedTab: 'more' })
              this.props.navigation.setOptions({ title: '更多' })
            }}
          >
            
          
        
      
    )
  }
}

export default Index
 
 
 
  
拍照功能
 
  
更多页面实现了两个功能：
 
 
 
 
1、是否显示地图页签 
 
 
2、拍照功能
 
 
安装模块
 
 
npm install expo-camera -S
 
 
改写 More.tsx 代码
 
 
以下代码是 拍照 和 切换显示地图按钮 的全部代码。
 
 
import React, { Component } from 'react'
import { View, Text, Switch, AsyncStorage, TouchableOpacity, Image } from 'react-native'
import { observer, inject } from 'mobx-react'

import * as Permissions from 'expo-permissions'
import { Camera } from 'expo-camera'

interface Props {
  store?: any
}

interface State {
  hasCameraPermission: boolean
  type: boolean
  isTakePic: boolean,
  picUri: string
}

@inject('store')
@observer
export default class Profile extends Component {
  camera = null

  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
    isTakePic: false,
    picUri: 'http://placehold.it/240x180'
  }

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ 
      hasCameraPermission: status === 'granted' 
    })
  }

  showTakePicScene() {
    this.setState({
      isTakePic: true
    })
  }

  async takePicture() {
    let result = await this.camera.takePictureAsync()
    this.setState({
      isTakePic: false,
      picUri: result.uri
    })
  }

  render() {
    return (
      <>
        {
          this.state.isTakePic
            ? (
               {
                  this.camera = ref
                }}
              >
                
                  
                    拍照
                  
                
              
            )
            : (
              
                
                  
                    是否显示地图：
                  
                   {
                      this.props.store.setVisible(value)
                      AsyncStorage.setItem('isShow', value.toString())
                    }}
                  >
                
                
                  
                    拍照
                  
                
                
                  
                
              
            )
        }
      
    )
  }
}
 
 
 
  
项目发布
 
  
本项目发布利用expo发布功能，详细可参考 构建独立的应用程序
 
 
 
 
安装 Expo CLI
 
 
此步骤已经完成。
 
 
配置 app.json
 
 
{
  "expo": {
    "name": "rn-cookbooks",
    "slug": "rn-cookbooks",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.qianfeng.felixlu",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.qianfeng.felixlu",
      "versionCode": 1
    }
  }
}
 
 
开始Build
 
 
expo build:android
 
 
或：
 
 
expo build:ios
 
 
build 过程监测
 
 
输入以上命令后，会在控制台看到下边信息：
 
 
Build started, it may take a few minutes to complete.
You can check the queue length at https://expo.io/turtle-status

You can monitor the build at

https://expo.io/dashboard/felixlurt/builds/15b2ae11-c98d-48dc-879e-9ff05fb0b9f1
 
 
可以通过访问 https://expo.io/dashboard/felixlurt/builds/15b2ae11-c98d-48dc-879e-9ff05fb0b9f1 来监控build过程。(注意链接是终端打印的，这个链接只是个示例)
 
 
build 成功后，点击 “Download” 按钮即可下载打完的APP安装包了。
 
 
 
  
注：iOS 需要有开发者账号，没有账号的童鞋建议运行 expo build:android进行试验
 
  
项目源码下载
 
 
 
 
点击下载 
 
 
 
  
感谢
 
 
 
 
❀感谢felix的帮助，想了解、学习更多前端知识的童鞋可以加他qq：2518121701 古艺散人，学前端找他准没错！
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(react-native,mobx,app,前端)

        

            

                
    
                    
  • 想家
                        爆米花机

                        
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
    
                    
    • 
                    
  • 【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • Linux下QT开发的动态库界面弹出操作（SDL2）
                        13jjyao
QT类qt开发语言sdl2linux
                        
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
    
                    
    • 
                    
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》
                        1784e22615e0

                        
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
    
                    
    • 
                    
  • 我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动
                        李蕾1229

                        
    为促进我校教师专业发展，发挥骨干教师的引领带头作用，11月6日下午，我校举行新老教师师徒结对仪式暨名师专业工作室工作交流活动。图片发自App会议由教师发展处李蕾主任主持，首先，由范校长宣读新老教师结对名单及双方承担职责。随后，两位新调入教师陈玉萍、莫正杰分别和他们的师傅鲍元美、刘召彬老师签订了师徒结对协议书。图片发自App图片发自App师徒拥抱、握手。有了师傅就有了目标有了方向，相信两位新教师在师
    
                    
    • 
                    
  • 向内而求
                        陈陈_19b4

                        
    10月27日，阴。阅读书目:《次第花开》。作者:希阿荣博堪布，是当今藏传佛家宁玛派最伟大的上师法王，如意宝晋美彭措仁波切颇具影响力的弟子之一。多年以来，赴海内外各地弘扬佛法，以正式授课、现场开示、发表文章等多种方法指导佛学弟子修行佛法。代表作《寂静之道》、《生命这出戏》、《透过佛法看世界》自出版以来一直是佛教类书籍中的畅销书。图片发自App金句:1.佛陀说，一切痛苦的根源在于我们长期以来对自身及外
    
                    
    • 
                    
  • html 中如何使用 uniapp 的部分方法
                        某公司摸鱼前端
htmluni-app前端
                        
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
    
                    
    • 
                    
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么
                        测评君高省

                        
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
    
                    
    • 
                    
  • 开心
                        蒋泳频

                        
    从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
    
                    
    • 
                    
  • 《小满细雨轻湿尘》
                        快乐的人ZZM

                        
    图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23
    
                    
    • 
                    
  • 网易严选官方旗舰店，优质商品，卓越服务
                        高省_飞智666600

                        
    网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
    
                    
    • 
                    
  • 感赏日志133
                        马姐读书

                        
    图片发自App感赏自己今天买个扫地机，以后可以解放出来多看点书，让这个智能小机器人替我工作了。感赏孩子最近进步很大，每天按时上学，认真听课，认真背书，主动认真完成老师布置的作业。感赏自己明白自己容易受到某人的影响，心情不好，每当此刻我就会舒缓，感赏，让自己尽快抽离，想好的一面。感赏儿子今天在我提醒他事情时，告诉我谢谢妈妈对我的提醒我明白了，而不是说我啰嗦，管事情，孩子更懂事了，懂得感恩了。投射父母
    
                    
    • 
                    
  • 今又重阳
                        芮峻

                        
    今又重阳图片发自App白露成霜菊花黄，岁岁重阳，今又重阳。登高远望，君不见，那来时路上少年，青丝已染雪霜。落日一点一点西坠，谁有力量，托住使其回往。转眼缺了大半，又能怎样？江天两茫茫。给我一壶烈酒，我要敬那斜阳，看谁先醉？笑指西天红了一片，借点酒力，老夫聊发一次少年狂。老严.2019年重阳节.杭州
    
                    
    • 
                    
  • 蘩漪：新女性？利己主义者
                        赮_红雨

                        
    蘩漪是曹禺《雷雨》笔下的女性形象。对于她的喜爱，曹禺在之前的访谈中，就已经表达得很清楚了，蘩漪是他所倾心的女子的“代替者”。在这个女性身上有着曹禺最精心的描写，但同时她的身上又存在着一些时代的问题。图片发自App首先，繁漪是追求自由和幸福的新女性形象。她是精神悲剧的核心人物，她对周朴园的反抗，具有典型意义。她是位资产阶级家庭出身的小姐，受过五四新思潮的影响，她任性、傲慢，追求人格独立、个性自由和爱
    
                    
    • 
                    
  • 直返最高等级与直返APP：无需邀请码的返利新体验
                        古楼

                        
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • python八股文面试题分享及解析(1)
                        Shawn________
python
                        
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
    
                    
    • 
                    
  • log4j配置
                        yy爱yy

                        
    #log4j.rootLogger配置的是大于等于当前级别的日志信息的输出#log4j.rootLogger用法:（注意appenderName可以是一个或多个）#log4j.rootLogger=日志级别,appenderName1,appenderName2,....#log4j.appender.appenderName2定义的是日志的输出方式，有两种：一种是命令行输出或者叫控制台输出，另一
    
                    
    • 
                    
  • 其二
                        十八尾喵

                        
    你知道吗？图片发自App我今天知道了你有喜欢的人，不是我。心空空的，整个人都不是我的了。可，怎么办？还是要好好的活着，毕竟你喜欢的人，我不能杀，可是我可以杀其他喜欢你的人呀！也罢，此生无缘，来世再见。鱼干
    
                    
    • 
                    
  • 2022现在哪个打车软件比较好用又便宜 实惠的打车软件合集
                        高省APP珊珊

                        
    这是一个信息高速传播的社会。信息可以通过手机，微信，自媒体，抖音等方式进行传播。但同时这也是一个交通四通发达的社会。高省APP，是2022年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，注册送2皇冠会员，送万元推广大礼包，教你如何1年做到百万团队。高
    
                    
    • 
                    
  • 没有邀请码怎么注册买手妈妈?
                        氧惠评测

                        
    买手妈妈怎么注册小编为大家带来买手妈妈没有邀请码怎么注册。打开买手妈妈APP，点击“马上注册”，输入邀请信息“邀请码”点击下一步，没有邀请码是登录不上的，所以这个必须要填写，那我们没有怎么办？填写成功就可以登录下一步。这里面有手机登录和淘宝登录，手机登录以后也需要用淘宝授权的，所以基本上都是淘宝登录。购物、看电影、点外卖、用氧惠APP！更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客
    
                    
    • 
                    
  • 穷人做什么生意最赚钱？10个适合穷人赚钱的路子？
                        氧惠爱高省

                        
    不管在什么地方，一般都是穷人占大量数，而富人只有少数，但是它们却掌握着大量的财富。对于穷人来说，想要买车、买房等奢侈品就难如登天，因为他们只能通过打工来赚取几千元的月薪。➤推荐网购返利app“氧惠”，一个领隐藏优惠券+现金返利的平台。氧惠只提供领券返利链接，下单全程都在淘宝、京东、拼多多等原平台，更支持抖音、快手电商、外卖红包返利等。（应用市场搜“氧惠”下载，邀请码:521521，全网优惠上氧惠！
    
                    
    • 
                    
  • 赠晶晶
                        在平凡中重新出发

                        
    逐伊衫望伊泪伊人雨中别离去莫再想莫再追莫要寸断再回味十六年六十年弹指挥间青鬓颜且浅行且珍惜待到山花烂漫时图片发自App
    
                    
    • 
                    
  • 闲鱼鱼小铺怎么开通？鱼小铺开通需要哪些流程？
                        高省APP大九

                        
    闲鱼鱼小铺是平台推出的一个专业程度的店铺，与普通店铺相比会有更多的权益，比如说发布的商品数量从50增加到500；拥有专业的店铺数据看板与分析的功能，这对于专门在闲鱼做生意的用户来说是非常有帮助的，那么鱼小铺每个人都能开通吗？大家好，我是高省APP联合创始人蓓蓓导师，高省APP是2021年推出的电商导购平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个可省钱佣金高，能
    
                    
    • 
                    
  • 直返APP是什么?直返APP是干嘛的
                        氧惠帮朋友一起省

                        
    直返是一种电商购物模式，其核心特点是用户购买商品后可以获得直接返利。具体来说，用户在直返电商平台购买商品时，不仅可以获得商品本身的优惠，还可以获得一定的现金返利或者积分奖励。返利的金额可以提现到用户的账户余额，或者用于下次购物时抵扣。氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万
    
                    
    • 
                    
  • 直返的东西正品吗?直返APP安全吗?直返是正规平台吗?
                        氧惠购物达人

                        
    亲们，你们是不是经常在直返APP上买东西呀？但是，你们有没有想过，里面的东西到底是不是正品呢？这个APP安全吗？它是不是一个正规的平台呀？别着急，今天我就来给大家揭秘一下！氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大
    
                    
    • 
                                
  • mysql主从数据同步
                                    林鹤霄
mysql主从数据同步
                                    
    配置mysql5.5主从服务器(转)   
教程开始：一、安装MySQL 
说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22 
 二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
    
                                
    • 
                                
  • oracle学习笔记
                                    caoyong
oracle
                                    
    1、ORACLE的安装 
   a>、ORACLE的版本 
   8i,9i :   i是internet 
   10g,11g : grid (网格) 
   12c : cloud (云计算) 
   
   b>、10g不支持win7 
&
    
                                
    • 
                                
  • 数据库，SQL零基础入门
                                    天子之骄
sql数据库入门基本术语
                                    
    数据库，SQL零基础入门 
       做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。 
  
       数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
    
                                
    • 
                                
  • pom.xml
                                    一炮送你回车库
pom.xml
                                    
    1、一级元素dependencies是可以被子项目继承的 
2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 
3、父项目里的一级元素<modules> 
<module>lcas-admin-war</module> 
<
    
                                
    • 
                                
  • sql查地区省市县
                                    3213213333332132
sqlmysql
                                    
    
-- db_yhm_city   
SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35   
  
SELECT * FROM db_yhm_city WHERE class_parent_id =169   
  
SELECT d1.cla
    
                                
    • 
                                
  • 关于监听器那些让人头疼的事
                                    宝剑锋梅花香
画图板监听器鼠标监听器
                                    
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。 
      
    
                                
    • 
                                
  • JAVA的遍历MAP
                                    darkranger
map
                                    
    Java Map遍历方式的选择 
1. 阐述 
　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 
　　为了解遍历性能的真实差距，包括在遍历ke
    
                                
    • 
                                
  • POJ 2312 Battle City 优先多列+bfs
                                    aijuans
搜索
                                    
    来源：http://poj.org/problem?id=2312 
题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 
思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
    
                                
    • 
                                
  • Hibernate与Jpa的关系，终于弄懂
                                    avords
javaHibernate数据库jpa
                                    
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 
在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
    
                                
    • 
                                
  • 酸爽的console.log
                                    bee1314
console
                                    
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 
/**
 * log.js hufeng
 * The safe wrapper for `console.xxx` functions
 *  
    
                                
    • 
                                
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质
                                    bijian1013
时间管理励志人生穷人过于忙碌
                                    
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 
　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
    
                                
    • 
                                
  • other operate
                                    征客丶
OSosx
                                    
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 
二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] 
 
-------------------------------------------------------------------- 
若有其他凝问或文中有错误，请及时向我指出， 
我好及时改正，同时也让我们一
    
                                
    • 
                                
  • 【Scala五】分析Spark源代码总结的Scala语法三
                                    bit1129
scala
                                    
    1. If语句作为表达式 
    val properties = if (jobIdToActiveJob.contains(jobId)) {
      jobIdToActiveJob(stage.jobId).properties
    } else {
      // this stage will be assigned to "default" po
    
                                
    • 
                                
  • ZooKeeper 入门
                                    BlueSkator
中间件zk
                                    
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 
值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
    
                                
    • 
                                
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么
                                    BreakingBad
mysqlDate
                                    
    取得当前时间用 now() 就行。
在数据库中格式化时间 用DATE_FORMA T(date, format) .
根据格式串format 格式化日期或日期和时间值date，返回结果串。

  可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值:

  %S, %s 两位数字形式的秒（ 00,01,
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-组合模式
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 



import java.util.ArrayList;
import java.util.List;

abstract class Component {
	
	public abstract void printStruct(Str
    
                                
    • 
                                
  • 4_JAVA+Oracle面试题(有答案)
                                    chenke
oracle
                                    
    基础测试题 
 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 
选择题 
1、 What will happen when you attempt to compile and run the following code? （3） 
public class Static { 
 static { 
 int x = 5; // 在static内有效 
 } 
 st
    
                                
    • 
                                
  • 新一代工作流系统设计目标
                                    comsci
工作算法脚本
                                    
     
  用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 
 
 在这个设计中，最难的地方是系统根据什么来生成流
    
                                
    • 
                                
  • oracle 行链接与行迁移
                                    daizj
oracle行迁移
                                    
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 
 
第一种情况: 
INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
    
                                
    • 
                                
  • [JShop]开源电子商务系统jshop的系统缓存实现
                                    dinguangx
jshop电子商务
                                    
    前言 
jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
    
                                
    • 
                                
  • 初三全学年难记忆单词
                                    dcj3sjt126com
englishword
                                    
    several 儿子；若干 
shelf 架子 
knowledge 知识；学问 
librarian 图书管理员 
abroad 到国外，在国外 
surf 冲浪 
wave 浪；波浪 
twice 两次；两倍 
describe 描写；叙述 
especially 特别；尤其 
attract 吸引 
prize 奖品；奖赏 
competition 比赛；竞争 
event 大事；事件 
O
    
                                
    • 
                                
  • sphinx实践
                                    dcj3sjt126com
sphinx
                                    
      
安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server 
  
yum install sphinx 
如果失败的话使用下面的方式安装 
wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm 
yum loca
    
                                
    • 
                                
  • JPA之JPQL（三）
                                    frank1234
ormjpaJPQL
                                    
    1 什么是JPQL 
JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 
 
2 检索单个对象 
@Test 
public  void querySingleObject1() { 
    Query query = em.createQuery("sele
    
                                
    • 
                                
  • Remove Duplicates from Sorted Array II
                                    hcx2013
remove
                                    
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? 
For example,Given sorted array nums = [1,1,1,2,2,3], 
Your function should return length 
    
                                
    • 
                                
  • Spring4新特性——Groovy Bean定义DSL
                                    jinnianshilongnian
spring 4
                                    
    Spring4新特性——泛型限定式依赖注入 
Spring4新特性——核心容器的其他改进 
Spring4新特性——Web开发的增强 
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  
Spring4新特性——Groovy Bean定义DSL 
Spring4新特性——更好的Java泛型操作API  
Spring4新
    
                                
    • 
                                
  • CentOS安装Mysql5.5
                                    liuxingguome
centos
                                    
    CentOS下以RPM方式安装MySQL5.5 
 
首先卸载系统自带Mysql： 
yum remove mysql mysql-server mysql-libs compat-mysql51 
rm -rf /var/lib/mysql 
rm /etc/my.cnf 
查看是否还有mysql软件： 
rpm -qa|grep mysql 
 
 
 
去http://dev.mysql.c
    
                                
    • 
                                
  • 第14章 工具函数（下）
                                    onestopweb
函数
                                    
    index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
    
                                
    • 
                                
  • POJ 1050
                                    SaraWon
二维数组子矩阵最大和
                                    
    POJ ACM第1050题的详细描述，请参照 
http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 
 
题目意思： 
给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 
如二维数组 
0 -2 -7 0 
9 2 -6 2 
-4 1 -4 1 
-1 8 0 -2 
中和最大的子矩阵是 
9 2 
-4 1 
-1 8 
且最大和是15
    
                                
    • 
                                
  • [5]设计模式——单例模式
                                    tsface
java单例设计模式虚拟机
                                    
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点 
  
安全的单例模式： 
  
  
/*
 * @(#)Singleton.java  2014-8-1
 *
 * Copyright 2014 XXXX, Inc. All rights reserved.
 */
package com.fiberhome.singleton;


    
                                
    • 
                                
  • Java8全新打造，英语学习supertool
                                    yangshangchuan
javasuperword闭包java8函数式编程
                                    
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。 
  
升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
    
                                
    •