React Native App

https://www.react-native.cn/docs/environment-setup

1.安装jdk 优先考虑jdk8

2.配置好环境变量 JAVA_HOME (C:\Program Files\Java\jdk1.8.0_131)

3.安装 androd studio

勾选上

 

4.  配置环境变量 ：

环境变量当中新建ANDROID_HOME  默认是在用户目录下的AppData\Local\Android\Sdk

ANDROID_HOME(C:\Users\Administrator.DESKTOP-9EG0EC9\AppData\Local\Android\Sdk)

注：Sdk文件需要先运行以下androd studio

5.安装一个插件 
https://adbdriver.com/

6.创建新目录并安装项目：

npx react-native init 项目名

7.手机打开开发者模式   数据线连接电脑

8.路由的安装：

在根目录cmd :           

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

底部导航的路由安装 : npm install @react-navigation/bottom-tabs

                                    npm install @react-navigation/bottom-tabs

 

在其他组件(页面) (.js)中必须引入import React from 'react';

9.路由的使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';

import {
  Alert,
  TouchableOpacity,
  Image,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Touchable,
} from 'react-native';

import {
  
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import {px} from './utils/devices';
import { log } from 'async';
//引入路由容器
import { NavigationContainer } from '@react-navigation/native';


import Page1 from './pages/page1';
import Page2 from './pages/page2';
import Page3 from './pages/page3';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const  Tab =  createBottomTabNavigator();     //底部导航

const SettingsScreen =()=>{
  return (
    <View><Text>我是setting</Text></View>
  )
}

const TabNav = ()=>{
  return(
        <Tab.Navigator>
              <Tab.Screen name="Home" component={Page1} />
              <Tab.Screen name="Settings" component={SettingsScreen} />
              <Tab.Screen name="ToP3" component={Page3} />
        </Tab.Navigator>
  )
}





const App: () => Node = () => {
 
 
  const fn1=()=>{
    console.log("!!!!");
  }

  return (
    <NavigationContainer>

      <Stack.Navigator screenOptions={{ headerShown:false } }>
            <Stack.Screen name="index" component={TabNav}/>
            <Stack.Screen name="p1" component={Page1} options={{headerShown:false}}/>
            <Stack.Screen name="p2" component={Page2}/>
      </Stack.Navigator>
      
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
  mystyle:{
    height:px(500),
  },
  mytextstyle:{
    fontSize:30,
    backgroundColor:"grey",
  },
  
  
});

export default App;

/*<TouchableOpacity>给View添加按压事件就需要用它包上 */

运行项目 npm run android     (手机弹窗选择允许)

10.图片的引入：

<Image source={require("图片路径")}/>