react-native 学习心得

最新推荐文章于 2021-01-28 13:18:35 发布

DragonWar%

最新推荐文章于 2021-01-28 13:18:35 发布

阅读量208

点赞数 1

文章标签： javascript json 前端 ViewUI

原文链接：https://juejin.im/post/5b924e586fb9a05cf52aa178

版权

需要的工具

Android Studio：这个是针对安卓原生开发的编译工具

genymotion :这个是安卓模拟器

Xcode :这个是iOS开发的编译工具

webstorm ：一个自己喜欢的代码编译工具（当然你也可以选择自己喜欢的编译工具，个人比较喜欢这个）

说在前面

我接触两周的感觉是react native和react的差不多，生命周期，组件的使用，接口的调用，都还是和react差不多，

但是标签的使用，样式的写法，和路由的使用却不一样。

目录结构介绍

页面标签样式组件路由接口调用介绍

（一）页面，标签和样式

学过react的小伙伴可能更容易上手，新建页面和react的一样，

不一样的是：

1,react一大部分标签里面都是可以直接写文本的，但是这里除了Text标签可以直接写文本，其他的需要在其属性里面写文本，

比如Button，有titie属性，目前我知道的是，所有的标签都是从react native里面引用（自定义组件除外）。

2, 样式是对象的形式，这个可以参看react native官网，

代码如下

（二）组件

组件和其他的组件使用方法一样，不管是vue，还是react,直接引入传值，代码如下：

组件：

import React, {PureComponent} from "react";
import { Text, } from "react-native";

export default class TestOne extends PureComponent {

  render() {
    return (
      <Text>这是一个组件</Text>
    );
  }
}


复制代码

在父组件的使用方法是:

import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
  render() {
    return (
      <View>
      <TestOne/>
      </View>
    );
  }
}

复制代码

（三）路由

配置，上面有介绍，我使用的路由是参react navigation,详细介绍还是去看文档；

我在页面文件夹下面创建了一个index的文件，作为页面路由的配置，目录结构如下

代码如下：其他的请参考导航的接口api

import React from "react";
import {
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator
} from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import HomeScreen from "./Home";
import DetailsScreen from "./Details";
import ModalScreen from "./Modal";
import RegisterScreen from "./Auth/RegisterScreen";
import SignInScreen from "./Auth/SignInScreen";
import SettingsScreen from "./Settings";
import UserSetScreen from "./Settings/UserSetScreen";


const Tab = createBottomTabNavigator( // 这个是tab切换形式的路由
  {
    Home: HomeScreen,
    Settings: SettingsScreen
  },
  {
    navigationOptions: ({ navigation }) => ({  // 这里是设置tab的样式，图片 类似于小程序
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-home`;
        } else if (routeName === "Settings") {
          iconName = `ios-settings`;
        }

        return <Ionicons name={iconName} size={25} color={tintColor}/>;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
);

const MainStack = createStackNavigator(  // 普通的页面跳转 ，类似于href
  {
    Tab: {    //  这些是可以简写的
      screen: Tab
    },
    Details: DetailsScreen,  //  这个就是简写的形式Details是路由名称，DetailsScreen是页面
    SetUser: {
      screen: UserSetScreen
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#f4511e"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack
    },
    MyModal: {
      screen: ModalScreen
    }
  },
  {
    mode: "modal",     //  设置页面跳转的方式 从底部滑入
    headerMode: "none"
  }
);

const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  RegisterScreen: RegisterScreen
});

const AppNavigator = createSwitchNavigator({  // 不可以回退的页面 类似于 replace
  Auth: AuthenticationNavigator,
  Root: RootStack
});

export default AppNavigator;


复制代码

路由配置好了，接下来看如何使用

import React, { PureComponent } from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class SignInScreen extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <StatusBar barStyle={"dark-content"} />  // 头部样式设置
         // 页面跳转 这只是一种方式，其他的还有back push 等
        <Button
          style={sty.title}
          title="Go Sign in"
          onPress={() => this.props.navigation.navigate("Root")} 
        />
        <Button
          title="Go Register"
          onPress={() => this.props.navigation.navigate("RegisterScreen")}
        />
      </View>
    );
  }
}
const sty=  StyleSheet.create({
  title:{
    color:'red',
  }
})


复制代码

路由是可以专递值的路由的第二个参数是个对象，里面可以用来传递一些值，具体使用如下代码

// 这个是home页面
import React, { PureComponent } from "react";
import { Button, StatusBar, Text, View,StyleSheet } from "react-native";
import TestOne from '../../components/TestOne';
export default class extends PureComponent {
 state = {
   count: 0
 };
 render() {
   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"light-content"} />
       <Text>主页面home</Text>
     <TestOne/>
       <Text>Count: {this.state.count}</Text>
       <Button
         title="去详情页面 detail"
         onPress={() => {  //  点击按钮的时候传递了一些值 
           this.props.navigation.navigate("Details", {   
             itemId: 86,
             otherParam: "First Details",
             onChangeTitle: 'title'
           });
         }}
       />
     </View>
   );
 }
}




// 这个是详情页面



import React, {PureComponent} from "react";
import { Button, View, Text, StatusBar } from "react-native";

export default class extends PureComponent {
 static navigationOptions = ({ navigation }) => {  
 state = {
   count: 0
 };

 render() {
   const { params } = this.props.navigation.state;
   const itemId = params ? params.itemId : null;
   const otherParam = params ? params.otherParam : null;

   return (
     <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <StatusBar barStyle={"dark-content"} />
       <Text>Details Screen</Text>
       <Text>itemId: {JSON.stringify(itemId)}</Text>
       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
     </View>
   );
 }
}


复制代码

路由的使用还有很多，建议去看文档，上面有推荐，谢谢

（四）接口调用

接口调用和react 调用一样，封装好request的方法，这里就不说了，可以参看github代码

（五）未完待续，谢谢！！

DragonWar%

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-native 学习心得

需要的工具Android Studio：这个是针对安卓原生开发的编译工具genymotion :这个是安卓模拟器Xcode :这个是iOS开发的编译工具webstorm ：一个自己喜欢的代码编译工具（当然你也可以选择自己喜欢的编译工具，个人比较喜欢这个）推荐学习网站react native 中文网站：环境配置和常用组件，api 都很详细RN路由react navigation ：...
复制链接

扫一扫