RN实现商城案例

案例说明

1. 案例界面
   
   项目由搜索框+轮播图+一个可以下拉的列表组成；不涉及后台接口（均为模拟数据）
2. 案例所用技术
   需要使用react native脚手架+expo;主要是对react native的组件进行学习
3. 文档
   https://reactnative.cn/docs/tutorial/

使用脚手架创建空的一个项目

# 没有脚手架自行安装脚手架
create-react-native-app myStore
# 打开项目并启动
cd myStore
expo start

安装模拟器

启动模拟器，将我们的expo软件拖动进去，此时它会帮我们安装这个软件；安装完成后打开

我们回到项目，按下a键会自动编译到模拟器中（如果报错可能是我们的版本问题；打开我们的app.json-- 更改 “sdkVersion”: “31.0.0”,）

首页架子

React Native采用的是伸缩布局；而且它屏幕不会因为像浏览器那样超出会出现滚动条…所以我们可以使用flex属性来使其占满达到我们想要的效果

首页组件抽取（在项目根目录下创建components）

• /component/Searchbar.js

import React from 'react'
import {
   View,Text,StyleSheet} from 'react-native'
export default class Searchbar extends React.Component{
   
    render(){
   
        return <View style={
   styles.searchbar}>
            <Text>搜素</Text>
        </View>
    }
}
const styles = StyleSheet.create({
   
    searchbar:{
   
        height:40,
        backgroundColor: 'red'
    }
})

• /component/Adverticement.js

import React from 'react'
import {
   View,Text,StyleSheet} from 'react-native'
export default class Adverticement extends React.Component{
   
    render(){
   
        return <View style={
   styles.adverticement}>
            <Text>广告</Text>
        </View>
    }
}
const styles = StyleSheet.create({
   
    adverticement:{
   
        height:200,
        backgroundColor: 'green'
    }
})

• /component/Products.js

import React from 'react'
import {
   View,Text,StyleSheet} from 'react-native'
export default class Products extends React.Component{
   
    render(){
   
        return <View style={
   styles.products}>
            <Text>产品</Text>
        </View>
    }
}
const styles = StyleSheet.create({
   
    products:{
   
        flex: 1,
        backgroundColor: 'blue'
    }
})

导入到我们的App.js

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

// 导入组件
import Adverticement from './components/Adverticement.js'
import Products from './components/Products.js'
import SearchBar from './components/SearchBar.js'
export default class App extends React.Component {
   
  render() {
   
    return (
      <View style={
   styles.container}>
        <SearchBar></SearchBar>
        <Adverticement></Adverticement>
        <Products></Products>
      </View>
    );
  }
}

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

状态栏的配置

我们可以看到顶部状态栏遮挡住我们的页面；我们此时可以使用StatusBar控制应用状态栏的组件进行配置。

由于StatusBar可以在任意视图中加载，且后加载的设置会覆盖先前的设置。因此在配合导航器使用时，请务必考虑清楚StatusBar的放置顺序。

      <View style={
   styles.container}>
        <StatusBar
          hidden={
   false}
          animated={
   true}
          backgroundColor="#ccc"
          barStyle="light-content"
          translucent={
   false}
        ></StatusBar>
        <SearchBar></SearchBar>
        <Adverticement></Adverticement>
        <Products></Products>
      </View>

searchBar页面

我们从图片中可以看出，它是由一个搜索框TextInput和一个按钮组成Button；我们布局的话使用伸缩布局，而按钮的背景色需要在props给的属性里面设置也就是给color属性一个值，搜索框flex:1使其占满自适应

import React from 'react'
import {
   View,Button,StyleSheet,TextInput,Alert} from 'react-native'
export default class Searchbar extends React.Component{
   
    // 文本框改变处理函数
    constructor(props){
   
        super(props)
        this.state = {
   
            searchVal:''
        }
    }
    // 文本框改变时，改变内容状态
    changeTextHandle = (newSearchVal)=>{
   
        this.setState({
   
            searchVal:newSearchVal
        })
    }
    searchHandle = () =>{
   
        Alert.alert(this.state.searchVal)
    }
    render(){
   
        return <View style={
   styles.searchbar}>
            <TextInput
            style={
   styles.input}
            placeholder='你的白猪王子登门造访'
            value={
   this.state.value}
            onChangeText={
   this.changeTextHandle}
            ></TextInput>
            <Button
            style={
   styles.button}
            onPress={
   this.searchHandle}
            title="搜索"
            ></Button>
        </View>
    }
}
const styles = StyleSheet.create({
   
    searchbar:{
   
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',
        paddingHorizontal: 10,
        height: 40,
    },
    input: {
   
        flex: 1,
        marginRight