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…哈…哈……上次……失误…失误……此…次……哈…哈…哈……我不会……哪么……大舌头……哪么……呆笨……直…白…了…！…亲们……看见…我口中……喝的…啥了么……呵…呵…呵……看见…我手上……又…拿的……啥了…么……哈…哈…哈……哈我的小宝贝
    

    • 

  • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法
江上清风山间明月
FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏

    文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
    

    • 

  • 微信小程序监听用户经纬度变化
某公司摸鱼前端
微信小程序小程序

    一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
    

    • 

  • 2019-04-08早
梦雅的简动力

    在上瑜伽课前10分钟的调息中，你的眼睛为什么总是想睁开？（焦虑）。你的眉头为什么总是紧锁？（压力）。练习体式时你为什么总是去看别人？（攀比）保持体式时你为什么总是烦躁？（性急）。保持长久而规律的练习，以上这些，终归离你远去。瑜伽，首先，不是帮你得到，而是教你放下。图片发自App时间，一时间无法跳离这个特殊的词汇毅力，坚持，真诚，需要时间来见证真相，现实，伪装，时间自然会揭秘珍惜它又害怕它可它丝毫不
    

    • 

  • 那些年我们一起传抄的歌词
木子李000

    那些年我们一起传抄的歌词文/李银波图片发自App“吹着自在的口哨，开着自编的玩笑，一千次重复的潇洒，把寂寞当做调料……”偶尔整理旧时书籍，发现了那本泛黄的歌词本，《十六岁的花季》，是啊，曾经脍炙人口，传唱已久的那首歌曲，让我回忆起了当年一起传抄歌词的那些岁月。一首首熟悉的歌曲，一个个用心写下的字，一张张明星的贴画跃然纸上，那么熟悉。那么亲切，却又那么遥远。时光带走了我们的青春年少，岁月沧桑了我们的
    

    • 

  • 传承
有声侑色

    珠宝，不仅仅美化了我们的生活，更传承了爱!图片发自App图片发自App图片发自App
    

    • 

  • uni-app实现 步骤条
夏夏的码农
uni-app

    实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
    

    • 

  • 手机上赚钱？学会这5种方法！高省app让你轻松赚钱！
高省浮沉000018

    随着智能手机的普及，越来越多的人开始探索在手机上赚钱的方法。不仅可以利用碎片时间增加收入，还能减少对传统办公室工作的依赖。本文将向您介绍5种在手机上赚钱的方法，并推荐一款高省app，帮助您实现手机赚钱的目标。大家好！我是高省APP最大团队&联合创始人浮沉导师！【高省】APP网购优惠券免费领，分享还能赚钱。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台。佣金更高，模式更好，终端用户不流失。0投资
    

    • 

  • 社交电商是什么意思通俗的说
氧惠好项目

    社交电商是目前电商发展的一个非常热门的领域，它将传统的电商和社交媒体相结合，让用户可以在社交平台上完成购物、支付等操作。社交电商不同于传统电商，它更加注重用户的社交性和互动性，通过社交媒体的传播，吸引用户关注，让产品能够更加快速地传播。京东密令红包：最爱领红包828红包多多148今天给大家分享我长期在做的副业，也在这里赚到人生第3桶金！氧惠APP佣金高，资质靠谱，各大应用市场均可搜索使用。【氧惠】
    

    • 

  • 有一种失去叫做得不到
野风狂生

    图片发自App有一种失去叫做得不到野风狂生（20190130）有一种失去叫做得不到失去的是希望是前进的方向是奋斗的动力是奇迹的召唤纵然有一天将其释怀遗憾的残迹却永留心底得不到有时也会心痛仿佛沙漠里远望着的一泓甘泉十米处被他人喝干涸仿佛黑洞里疲惫追逐的火焰在握住前一秒耗尽光明仿佛风雪彻骨的冬天被人剥剩至赤裸而夜行山莽埋葬未曾示面的野心有谁还会去祭奠不用问我问我也无可奉告不用问你问你也缄默不言去拥抱那
    

    • 

  • 入伏（五）
喜马ma

    图片发自App入伏13今天我看见很多蜻蜓在飞飞得很低想起小学时学的那点知识在这闷热的午后真能来一场暴雨太过瘾了入伏14有点像瓢虫的昆虫喜欢吃葡萄叶喜欢交配在炎热的夏天如果你在葡萄园看见两只昆虫它们不是在吃葡萄叶就是在交配请记住它们的名字叫葡萄十星红甲
    

    • 

  • v-for 实例
琪33

    v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
    

    • 

  • 用XMLHttpRequest发送和接收JSON数据
潭池先生
jsonXMLHttpRequest前端

    百度的AI回答了一个案例：varxhr=newXMLHttpRequest();varurl="your_endpoint_url";//替换为你的API端点vardata=JSON.stringify({key1:"value1",key2:"value2"});xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","appl
    

    • 

  • npm 搭建 Vite 项目
渺小的虫子
viter前端javascript开发语言

    兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
    

    • 

  • 买莆田鞋的app软件，三大app莆田鞋平台推荐给大家
腕表鞋屋

    买莆田鞋的app软件，三大app莆田鞋平台推荐给大家，如毒app、亚马逊、潮鞋之家、鞋子货源app、淘宝等app都非常的好用，还有更多的可以购买莆田鞋子，莆田鞋在哪个app买好用，下面一起看看。微信:pt188x(下单赠送精美礼品)买莆田鞋的三大app软件：一、淘宝app。买莆田鞋当然少不了淘宝，建议大家不要直接去搜索莆田鞋，那样给出的结果是很少的。大家看上哪款鞋子的型号直接去搜索就可以了，然后按
    

    • 

  • 直返APP所属的公司是何时成立的?它的发展历程和业务范围
好项目高省

    直返APP为我们带来了返利购物的便利，那么这款APP所属的公司是如何成立的呢？它的背后又有怎样的发展历程和业务范围呢？让我们一起探寻。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。高省是公认的返利最高的软件。古楼导师高省邀请码5558
    

    • 

  • 大前端-postcss安装使用指南
黑夜照亮前行的路
postcss

    PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
    

    • 

  • 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程
pigerr杨
Pythonpythonchromedrivers

    ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
    

    • 

  • 虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端javascript开发语言

    虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
    

    • 

  • 00后的我和你们
三七_f4f4

    大部分人认为，这个社会压力最大的莫过于90后。可能上有老下有小，可以正在被催婚。工作压力大。可是也有大部分00后也步入了社会，比起90后，他们更是迷茫，不知所措。虽没有来自家庭的压力，没有来自催婚的烦劳。可迷茫真的很可怕，不知道一会该干嘛，该想那些方面发展。觉得自己以后就这样碌碌无为了吗？就这样过一辈子吗？又不甘。图片发自App前几天在抖音上看见一个视频，他说姚明在苦练篮球。谁谁在苦练什么。问，你
    

    • 

  • 3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
#JavaWeb前端ajaxelementuijava前端框架

    P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
    

    • 

  • 放飞自我
朵朵颐

    图片发自App这个图是今天我分享的视频截屏下来的，设计师的创意让人感动，看着这个设计就会想设计师的灵感来源于哪里？设计师是一个什么样的人？设计师一定是一个放飞自我的人了，我心中充满喜悦之情去欣赏这个设计，它的精彩之处是每个人都可以从自己的角度去看待这个艺术品，我觉得它像一个镜头，光圈、焦距、快门。。。中间白色的一圈是最终曝光的地方，我想创意来源于手动变焦相机。听完马云的讲话，我脑海里浮现出“放飞自
    

    • 

  • 2018-11-18成长小组学习笔记
实验中学45

    因为嗓子“罢工”，我面对众人只能借“微笑”代言。在开始授课前，绣霞老师先反馈上次作业的情况，提到“接纳”需是真正发自内心的完全接纳，而不是口头上的接纳，内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”，夫妻间的问题不能影响到孩子，对孩子更好的爱不是你为他做的更多，而是给他自由、健康成长的空间。图片发自App一、孩子：家庭的一面镜子夫妻成了彼此的“投射”，婚姻便“吵的不可开交”，婚姻便成
    

    • 

  • “播下种子，亲近梦想”北京研学营日记Day2
贝壳Bella

    到目前为止，没有收到同学们想家的反馈，应该没有孩子哭，从门外听到的也是一片安静，估计一个个都进入了梦想。从6:30至9:00回到酒店，的确有些辛苦。有些孩子坚持得很好，有些在下午五点离开科技馆时已经疲惫不堪，嚷嚷着回酒店。于是，餐后在车上立了一个规矩，明天在长城上喊累不能超过三次，因为这也是会传染的。图片发自App从科技馆步行至鸟巢，在等红绿灯时居然就有同学蹲下了。有些孩子一上车睡觉，养好精神，路
    

    • 

  • flutter 修改app名字和图标
肥肥呀呀呀
flutter

    一、修改名字在Android中修改应用程序名称：在AndroidManifest.xml文件中修改应用程序名称：打开Flutter项目中的android/app/src/main/AndroidManifest.xml文件。找到标签，然后在android:label属性中修改应用程序的名称，例如：android:label="YourNewAppName"。在strings.xml文件中修改应用程
    

    • 

  • 2.5 项目讲解流程
王守谦26
项目资料数据库

    一、项目讲解1、自我介绍2、项目流程-===============================二、自我介绍（一）、学员自我介绍，讲解存在的问题比如：讲解年份、卡顿、重点学历、忘记（二）自我规则内容1、开场白：礼貌用语2、时间：自我介绍1-2分钟以内3、内容：姓名、籍贯、毕业院校、（拉进面试官距离）4、技能：功能测试、接口测试、自动化测试、app测试、性能测试、安全测试黑盒测试、白盒测试、灰盒
    

    • 

  • 上班族适合兼职的副业有哪些？分享五个适合上班族做的副业
高省张导师

    对于许多上班族来说，除了日常工作外，还有大量的空闲时间，因此兼职成为了一项非常普遍的选择。下面将向您介绍五个不错的兼职副业，每个兼职都可以很容易地从家中启动，同时也是一个短期见效的方式，可以让您很快增加收入。大家好，我是高省APP最大团队，【高省】是一个可省钱佣金高，能赚钱有收益的平台，百度有几百万篇报道，也期待你的加入。高省邀请码520888，注册送2皇冠会员，送万元推广大礼包。1、社交导购电商
    

    • 

  • natapp内网穿透工具
万变不离其宗_8
工具其他

    1.NATAPP1分钟快速新手图文教程https://natapp.cn/article/natapp_newbie2.下载https://natapp.cn/#download3.使用本地配置文件config.ini，下载地址如下：https://natapp.cn/article/config_ini
    

    • 

  • VGG16滤镜可视化和类激活图
LIjin_1006
人工智能神经网络深度学习cnn

    这个用keras2.2.4+tensorflow1.15.0importkeraskeras.__version__fromkeras.applicationsimportVGG16fromkerasimportbackendasKimportnumpyasnpfromkerasimportmodelsimportmatplotlib.pyplotaspltimporttensorflowastf
    

    • 

  • ruoyi使用笔记
万变不离其宗_8
项目笔记代码参考笔记笔记java前端

    1.限流处理@RateLimiter@PostMapping("/createOrder")@ApiOperation("创建充值订单")@RateLimiter(key=CacheConstants.REPEAT_SUBMIT_KEY,time=10,count=1,limitType=LimitType.IP)publicRcreateOrder(@RequestBodyFormform){/
    

    • 

  • 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。
 
升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
    

    •