# rn_project

**Repository Path**: null_612_8761/rn_project

## Basic Information

- **Project Name**: rn_project
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: EPL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-06-21
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目日志

### 项目预览

![image-20210523154327134](项目日志（二）.assets/image-20210523154327134.png)



### 项目技术选型

1. 发请求 Axios
2. UI框架：React-native-elements
3. 路由系统：React-navigation
4. 轮播图：react-native-swiper
5. 集成图标库 
6. 后续补充
   * 定位
   * 登录
   * 无限滚动FlatList



### 安装项目依赖

```js
yarn add  @react-native-community/cli react-native-vector-icons react-native-elements react-native-swiper axios @react-navigation/stack @react-navigation/native @react-navigation/drawer @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view -S

```



### UI框架

#### 安装

1. ```yarn add react-native-elements -S```

   * ```yarn add react-native-safe-area-context -S```

   * ```react-native link react-native-safe-area-context```

2. 集成图标库```yarn add react-native-vector-icons -S```

3. link解决依赖问题```npx react-native link react-native-vector-icons```





### 知识点

* react-native-elemetn Avatar ：rounded 圆形图标，默认方形



### React-navigation

* 核心思想（没有地址栏，所以没有path）
  * Stack 栈  <img src="../day04-RN-project/项目日志.assets/image-20210523170901437.png" alt="image-20210523170901437" style="zoom:50%;" />
  * Screen 屏幕（router-view）
  * Drawer 侧边拖动的
  * Tab  底部导航栏

* API
  * navigation.navigate(name,数据对象)
  * navigation.back()
  * <Drawer.Screen name="Home" component={HomeScreen} />
  * 传递给组件的参数{route,navigation}
    * route.params 获取数据



### 图标集（图标选择必备，重要）

* https://oblador.github.io/react-native-vector-icons/



### 坑

组件属性不继承，文本节点必须在Text中
TouchableWithoutFeedback必须一个根节点
Flex布局会继承
const { width, height, scale, fontScale } = Dimensions.get('window');
多属性：        transform: [{translateY:20}]

* 如果默认按钮点击不出现水波纹，则有可能发生app假死，重启应用即可
* 无法连接上debugger, 唤出模拟器开发菜单， 【stop debug】
* 确定编写的代码是简单的、正确的，仍然白屏，重启应用app
* display:'flex' // none|flex
* lstat -> 包名/node_module 不重要的操作（文件被程序占用）



### 需求1

* 处理底部Tab的四种图标及文字

* 图标

  ```js
  // AntDesign:home
  // MaterialCommunityIcons:panda
  // AntDesign:message1
  // Fontisto:person
  ```

* 需要处理的内容：

  1. 图标
  2. 文字
  3. 颜色（选中与不选中）
     * 未选中：黑色
     * 选中：红色





### 需求1总结

```jsx
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 工厂函数创建
let Tab = createBottomTabNavigator();

// 容器组件
<NavigationContainer>
{/* router-view*/}
    <Tab.Navigator
    	screenOptions={ ({route})=>({
            // 属性1 
            tabBarLabel:({focused,color,size})=>{ 
                return <Text style={动态}></Text>  
            },
           // 属性2
        }) }    
    >
        	<Tab.Screen name="xxx" component={组件对象}
    </Tab.Navigator>
</NavigationContainer>


```



### 需求2头部

![image-20210606105026964](项目日志（二）.assets/image-20210606105026964.png)

* 手机端：flex支持都很好

* RN中flex默认 不是 direction:row



#### 改变状态栏颜色

* import { StatusBar } from 'react-native'

![image-20210606105630976](项目日志（二）.assets/image-20210606105630976.png)

```jsx
import {StatusBar} from 'react-native';
<StatusBar hidden={false} backgroundColor="#f8cf39"></StatusBar>
```





### 需求：处理扫一扫等图标

![image-20210606142523393](项目日志（二）.assets/image-20210606142523393.png)

FontAwesome microphone
Ionicons add
AntDesign scan1
AntDesign qrcode
AntDesign wallet
MaterialIcons pedal-bike



### 轮播图

* yarn add react-native-swiper -S