1. React Native 基本常识
1.与安卓设备连接
安卓下载 Expo，使用 USB 连接电脑，打开手机ADB调试。
在 Console 里输入 npm start 以后戳 a 在安卓设备上运行。如果提示 SDK 版本太低检查一下有没有 npm install
2. React Native 的组件
React Native 组件在不同的平台上会被翻译成不同的组件。
React Native 没有 HTML/DOM CSS 的概念。因此 p 标签与 CSS 表等熟悉的概念不再适用。
对于样式，我们使用JS样式表。通过StyleSheet.create从一个 JS Object 中创建一个样式表。示例代码如下：
import {StyleSheet,Text} from 'react-native'
const styles=StyleSheet.create({
p:{
fontSize:16
},
container:{
flex:1,
justifyContent:'center',
backgroundColor:'green'
}
})
<Text style={styles.p}>这是一个虚假的p标签</Text>
<Text style={[styles.p,styles.thm]}>使用多个样式的方法</Text>
然后列举一些 RN 组件和对应的 React 组件。
| React 组件 | RN 组件 | 使用例 | 备注 |
|---|---|---|---|
/ |
|||
| 相对屏幕固定 | |||
| 可滚动的内容 | |||
| style 参数内必须显式指定图片长宽，source 是一个 JS Object ，其中的连接是 uri 并不是 url | |||
| Button 必须指定标题！而不是把标题文本夹在标签中间,按压触发是 onPress 不是 onClick！ | |||
| 开关，使用受控组件维护 |
3. 分平台的组件
如果有些组件（例如）只有在安卓/iOS 平台上有？
import {Platform} from "react-native"
if (Platform.OS === 'android')
return <Component_android/>
else return <Component_iOS/>
4. 获取屏幕大小
import {Dimensios} from "react-native"
const getScreenSize = () => {
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);
return { screenWidth: screenWidth, screenHeight: screenHeight };
}
在大型项目中，建议使用 useMemo 来固定 getScreenSize 函数。
2. React Navigation
1. 什么是React Navigation？
之前的课程使用 React Router 进行导航。
简要来说，React Navigation 是基于 Screen 的概念，因此更适合移动端导航。React Router 基于 path 适用于网页端导航：
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout/>} >
<Route path="index" element={<Home/>}/>
<Route path="about-us" element={<AboutUs/>}/>
<Route path="*" element={<NoneExist/>}/>
</Route>
</Routes>
</BrowserRouter>
两者的共同之处在于把网页/手机 App 页屏视为 React 组件。
2. React Navigation 的三种形式
- Tab Navigation 屏幕底部的导航栏
- Drawer Navigation 是一个可收纳的导航栏
- Stack Navigation 是一个存放页面的栈，通过返回键来 pop
代码示例(Tab Navigation)：
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const BadgerSocialTabs = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<BadgerSocialTabs.Navigator >
<BadgerSocialTabs.Screen name="NewsFeed" component={NewsFeedScreen} options={{headerShown: false}}/>
<BadgerSocialTabs.Screen name="Notifications" component={NotificationScreen}/>
<BadgerSocialTabs.Screen name="AboutMe" component={AboutMeScreen} options={{title: "Profile"}}/>
</BadgerSocialTabs.Navigator>
</NavigationContainer>
);
}
最外层使用 NavigationContainer 包裹，BadgerSocialTabs 是一个利用createBottomTabNavigator 制作出来的组件对象。外层是<.Navigator> 内层是 <.Screen>
name 是导航的标签，component 表示要导航去的组件。
options 选项内可以使用title指定显示的标题，或是用 headerShown:false 来取消显示标题。
3. 导航嵌套&Stack Navigator
上面的代码，NewsFeedScreen 组件里边还可以放一个导航。（例如一个Stack Navigation 表示看的新闻卡片）
注意 NavigationContainer 不能嵌套！所以在 NewsFeedScreen 组件里边放的是Navigator-Screen 两层结构。
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import NewsFeedScreen from '../NewsFeedScreen';
import NewsFeedDetailScreen from '../NewsFeedDetailScreen';
const NewsStack = createNativeStackNavigator();
function NewsFeedStack() {
return (
<NewsStack.Navigator>
<NewsStack.Screen name="AllPosts" component={NewsFeedScreen} options={{headerShown: false}}/>
<NewsStack.Screen name="SpecificPost" component={NewsFeedDetailScreen} options={{headerShown: false}}/>
</NewsStack.Navigator>
);
}
对于 Stack Navigation 的理解：Navigator 内部的 Screen 们可以视为一个 map，在 name 和 component 间建立联系。
使用跳转：
先使用：const navigation=useNavigation()
再使用：navigation.push(screenName,params)
screenName 是那个 Screen 的 name，而不是 component 名字。
params 表示要传进那个组件里边的 props。
在组件中调用 props：props.route.params