1、基本语法

1-1 hello world

  1. //要使用标签,第一步必须导入
  2. import React, { Component } from 'react';
  3. import { Text, View,Button} from 'react-native';
  4. export default class App extends Component {
  5.   render() {
  6.     return (
  7.         <View>
  8.           <Text>Hello, world!</Text>
  9.           <Button 
  10.           color="#ff2d51"
  11.           title="btn"/>
  12.         </View>
  13.     );
  14.   }
  15. }

1-2 Image

  1. //网络图片
  2. <Image source={{uri:"xxx"}}>
  3. //Tips:图片相关的资源一定要夹样式width,height
  4. //本地图片
  5. <Image source={require('./assets/bg.jpg')}/>

1-3 样式

  1. import React, { Component } from 'react';
  2. import { Text, View,StyleSheet} from 'react-native';
  3. export default class App extends Component {
  4.   render() {
  5.     return (
  6.         <View style={styles.container}>
  7.           //给多个style
  8.           <Text style={[styles.txt,styles.bg]} >hello</Text>
  9.         </View>
  10.     );
  12.   }
  13. }
  14. const styles = StyleSheet.create({
  15.     container:{
  16.       backgroundColor:"red",
  17.       width:200,
  18.       height:200
  19.     },
  20.     txt:{
  21.       color:"blue"
  22.     },
  23.     bg:{
  24.       backgroundColor:"#fff"
  25.     }
  26. })

1-4 Dimensions

  1. import { Dimensions } from 'react-native';
  2. const { width, height,scale} =Dimensions.get('window');

1-5 布局

  1. //react-native中默认view就是flex布局
  2. export default class App extends Component {
  3.   render() {
  4.     return (
  5.       <View style={styles.container}>
  6.          <View style={styles.child}></View>
  7.          <View style={styles.child}></View>
  8.          <View style={styles.child}></View>
  9.       </View>
  10.     );
  11.   }
  12. }
  13. const styles = StyleSheet.create({
  14.   container: {
  15.     width:400,
  16.     height:400,
  17.     backgroundColor:"red",
  18.     flexDirection:"row",
  19.     justifyContent:"space-around",
  20.     alignItems:"center"
  21.   },
  22.   child:{
  23.     width:100,
  24.     height:100,
  25.     backgroundColor:"blue"
  26.   }
  27. })

1-6 调试

  1. 1.夜神模拟器
  2. 2.android studios
  3. 3.真机调试

1-7 transform

  1. transform:[{translate:[-50,-50]}]
  2. // transform:[{translateX:-50},{translateY:-50}]

1-8、FlatList

  1. <FlatList style={styles.item}
  2.     data={this.state.musics}
  3.     // horizontal={true}
  4.     renderItem={({ item }) => <View>
  5.   <Image style={styles.img} source={{uri:item.coverImgUrl}}/>
  6.     <Text style={styles.name}>{item.name}</Text>
  7.     </View>}
  8. />

2、事件

  1. <Button
  2.       title="btn"
  3.        onPress={()=>{
  4.        Alert.alert("good")
  5.         }}
  6.  ></Button>
  7. export default class App extends Component {
  8.   render() {
  9.     return (
  10.       <View style={styles.container}>
  11.         <Button
  12.           title="btn"
  13.           onPress={this.handleClick}
  14.         ></Button>
  15.       </View>
  16.     );
  17.   }
  18.   handleClick=()=>{
  19.     Alert.alert("good")
  20.   }
  21. }

3、Http请求

  1. componentDidMount() {
  2.     // ctrl+shift+j
  3.     var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
  4.     fetch(url).then(res => res.json()).then(resJson => {
  5.       console.log(resJson.programs)
  6.       this.setState({
  7.         movies: resJson.programs
  8.       })
  9.     })
  10.   }
  11. //支持async await
  12. async componentDidMount() {
  13.     // ctrl+shift+j
  14.     var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
  15.     var data = await fetch(url);
  16.     var resJson = await data.json();
  17.     console.log(resJson)
  18.   }

4、安装插件

  1. react native Snippet
  2. rnc    ----快速生成react-native

5、路由

1-1、配置

链接

  1. yarn add react-navigation
  2. yarn add react-navigation-stack
  1. yarn add react-native-reanimated react-native-gesture-handler react-native-screens
  1. //在android/app/build.gradle 中 dependencies 选项中添加下面这两行:
  2. implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
  3. implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  1. 在 src/main/java/com/native02/MainActivity.java 中加上
  4. package com.reactnavigation.example;
  6. import com.facebook.react.ReactActivity;
  8. + import com.facebook.react.ReactActivityDelegate;
  9. + import com.facebook.react.ReactRootView;
  10. + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
  12. public class MainActivity extends ReactActivity {
  14.   @Override
  15.   protected String getMainComponentName() {
  16.     return "Example";
  17.   }
  19. +  @Override
  20. +  protected ReactActivityDelegate createReactActivityDelegate() {
  21. +    return new ReactActivityDelegate(this, getMainComponentName()) {
  22. +      @Override
  23. +      protected ReactRootView createRootView() {
  24. +       return new RNGestureHandlerEnabledRootView(MainActivity.this);
  25. +      }
  26. +    };
  27. +  }
  28. }
  1. //index.js
  2. import 'react-native-gesture-handler'

1-2、拆分

  1. routers
  2. views
  1. //routers/index.js
  2. import { createAppContainer } from 'react-navigation';
  3. import { createStackNavigator } from 'react-navigation-stack';
  4. import HomePage from '../views/HomePage';
  5. const AppNavigator = createStackNavigator(
  6.     {
  7.       Home: {
  8.         screen: HomePage
  9.       },
  10.     }, 
  11.     {
  12.     initialRouteName: "Home"
  13.     }
  14.   );
  16. export default createAppContainer(AppNavigator);
  1. //App.js
  2. import React from 'react';
  3. import AppNavigator from './routers'
  4. export default class App extends React.Component {
  5.   render() {
  6.     return <AppNavigator/>
  7.   }
  8. }

1-3、配置导航条

1-3-1、在组件中配置

  1. class HomeScreen extends React.Component {
  2.   static navigationOptions = {
  3.     title: 'Home',
  4.   };
  5. }

1-3-2、在路由中配置

  1. const AppNavigator = createStackNavigator(
  2.     {
  3.         Home: {
  4.             screen: HomePage,
  5.             navigationOptions: {
  6.                 headerTitle: "网易",
  7.                 headerStyle: {
  8.                     backgroundColor: "#c20c0c"
  9.                 },
  10.                 headerTitleStyle: {
  11.                     color: "#fff"
  12.                 }
  13.             }
  14.         },
  15.     }
  16. );

1-3-3、导航条的全局配置

  1. const AppNavigator = createStackNavigator(
  2.     ...
  3.     {
  4.         initialRouteName: "Home",
  5.         //导航条的全局配置
  6.         defaultNavigationOptions: {
  7.             headerStyle: {
  8.                 backgroundColor: "#c20c0c"
  9.             },
  10.             headerTitleStyle: {
  11.                 color: "#fff"
  12.             },
  13.             headerTintColor:"#fff"
  14.         }
  15.     }
  16. );

6、跳转

  1. //配置Detail页面
  2. const AppNavigator = createStackNavigator(
  3.     {
  4.         Home: {
  5.             screen: HomePage,
  6.         },
  7.         Detail:{
  8.             screen: DetailPage
  9.         }
  10.     }
  11. );
  1. //跳转
  2. <Button
  3. title="Go to Details"
  4. onPress={() => this.props.navigation.navigate('Detail')}
  5.  />
  1. <Button
  2. title="Go to Details"
  3. onPress={this.toggleDetail}
  4. />
  5. toggleDetail=()=>{
  6.   this.props.navigation.navigate('Detail',{id:"86"})
  7. }

7、从Welcome到Home

  1. export default class WelcomePage extends Component {
  2.   ...
  3.   componentDidMount(){
  4.       this.timer = setTimeout(()=>{
  5.         this.props.navigation.navigate("Home")
  6.       },3000)
  8.   }
  9.   componentWillUnmount(){
  10.       if(this.timer){
  11.           clearTimeout(this.timer)
  12.       }
  13.   }
  14. }

8、传值

  1. //传递页面
  2. export default class HomePage extends Component {
  3.     render() {
  4.         return (
  5.             <View>
  6.                 <Text> HomePage </Text>
  7.                 <Button
  8.                     title="Go to Details"
  9.                     onPress={this.toggleDetail}
  10.                 />
  11.             </View>
  12.         );
  13.     }
  14.     toggleDetail=()=>{
  15.         this.props.navigation.navigate('Detail',{id:"1001"})
  16.     }
  17. }
  1. //接收页面
  2. componentDidMount(){
  3.   let id = this.props.navigation.getParam("id");
  4.   Alert.alert(id)
  5. }

9、欢迎页跳转到首页

  1. import { createAppContainer, createSwitchNavigator } from 'react-navigation'
  2. import { createStackNavigator } from 'react-navigation-stack'
  3. import WelcomePage from '../views/WelcomePage'
  4. import HomePage from '../views/HomePage'
  5. //配置两个 导航器stack
  6. const InitNavigator = createStackNavigator({
  7.     WelcomePage: {
  8.         screen: WelcomePage,
  9.         navigationOptions: {
  10.             header: null
  11.         }
  12.     }
  13. })
  14. const MainNavigator = createStackNavigator({
  15.     HomePage: {
  16.         screen: HomePage
  17.     }
  18. })
  19. //使用switch  让app中只有一个stack
  20. const router = createSwitchNavigator({
  21.     Init: InitNavigator,
  22.     Main: MainNavigator
  23. }, {
  24.     initialRouteName:'Init'
  25. })
  26. export default createAppContainer(router)
  27. //Welcome.js
  28. export default class WelcomePage extends Component {
  29.   componentDidMount(){
  30.     this.props.navigation.navigate("Main")
  31.   }
  32. }

八、Icons

  1. //1.安装
  2. yarn add react-native-vector-icons
  3. //2.配置  android/app/build.gradle
  4. apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  5. //3.使用
  6. import AntIcon from 'react-native-vector-icons/AntDesign'
  7. import Ionicons from 'react-native-vector-icons/Ionicons'
  8. <AntIcon name="stepforward" size={30} color="#900" />
  9. <Ionicons name="ios-add" size={30} color="#900" />

九、底部导航的配置

  1. yarn add react-navigation-tabs
  2. import React from 'react'
  3. import { createBottomTabNavigator } from 'react-navigation-tabs';
  4. import MusicPage from '../views/tabs/MusicPage';
  5. import MvPage from '../views/tabs/MvPage';
  6. import Ionicons from 'react-native-vector-icons/Ionicons'
  7. const TabNavigator = createBottomTabNavigator({
  8.     Music: {
  9.         screen: MusicPage,
  10.         navigationOptions: {
  11.             tabBarLabel: "音乐"
  12.         }
  13.     },
  14.     Mv: MvPage
  15. }, {
  16.     defaultNavigationOptions: ({ navigation }) => ({
  17.         tabBarIcon: ({ focused, horizontal, tintColor }) => {
  18.             const { routeName } = navigation.state;
  19.             let IconComponent = Ionicons;
  20.             let iconName;
  21.             if (routeName === 'Music') {
  22.                 iconName = `ios-home`
  23.             } else if (routeName === 'Mv') {
  24.                 iconName = `ios-options`;
  25.             }
  26.             return <IconComponent name={iconName} size={25} color={tintColor} />;
  27.         },
  28.     }),
  29.     tabBarOptions: {
  30.         activeTintColor: 'red',
  31.         inactiveTintColor: "#333",
  32.         style: {
  33.             backgroundColor: "#eee"
  34.         },
  35.         labelStyle: {
  36.             fontSize: 18
  37.         }
  38.     }
  39. });
  40. export default TabNavigator
  41. //将配置好的Tabs设置给HomePage
  42. const MainNavigator = createStackNavigator({
  43.     HomePage: {
  44.         screen:Tabs
  45.     }
  46. })