在西宁做网站可以吗wordpress登陆才可以看到

当前位置： 首页 > news >正文

在西宁做网站可以吗,wordpress登陆才可以看到,邢台论坛网,宁德住房和城乡建设部网站创建react native项目的笔记 重新下载 ruby安装 watchman安装 cocoapods安装 react native 项目创建好项目后安装 ios 依赖清除设备缓存安装 android 依赖链接 网易 mumu 模拟器安装路由 Navigation页面之间的跳转逻辑自定义头部样式判断不同设备平台代码示例安装 Axios安装本地… 创建react native项目的笔记 重新下载 ruby安装 watchman安装 cocoapods安装 react native 项目创建好项目后安装 ios 依赖清除设备缓存安装 android 依赖链接 网易 mumu 模拟器安装路由 Navigation页面之间的跳转逻辑自定义头部样式判断不同设备平台代码示例安装 Axios安装本地简单存储工具安装轮播图安装 Toast 消息弹出框公共信息确认框安装线性渐变色安装富文本解析器安装下拉选择插件安装上传图片插件类似于小程序 onShow 生命周期 重新下载 ruby 1.ruby环境必须是2.6.10版本以上(查看ruby版本 ruby -v)brew reinstall ruby2.进入vim编辑器 vim ~/.zshrc3.配置 export PATH/usr/local/opt/ruby/bin:$PATH export LDFLAGS-L/usr/local/opt/ruby/lib export CPPFLAGS-I/usr/local/opt/ruby/include export PKG_CONFIG_PATH/usr/local/opt/ruby/lib/pkgconfig4.重新执行一下文件 source ~/.zshrc安装 watchman brew install watchman安装 cocoapods sudo gem install cocoapods pod setup安装 react native 项目 npx react-nativelatest init 项目名称npx react-native run-ios npx react-native run-android创建好项目后安装 ios 依赖 1.第一步 进入ios文件夹 cd ios2.第二步 bundle install3.第三步 bundle exec pod install运行项目打包ios清除设备缓存 1.android npx react-native start –reset-cache2.ios npx react-native start –reset-cache –reset-cache安装 android 依赖 cd android ./gradlew clean cd .. npx react-native run-android 链接 网易 mumu 模拟器 1.windows adb connect 127.0.0.1:75552.mac adb connect 127.0.0.1:5555安装路由 Navigation 1.第一步 npm install react-navigation/native2.第二步 npm install react-native-screens react-native-safe-area-contextreact-native-safe-area-context提供了处理安全区域Safe Area的能力。安全区域是指屏幕上不受刘海屏、圆角等系统元素遮挡的区域在App.jsx文件中引入 NavigationContainer是一个组件用于管理我们的导航树并包含导航状态。 这个组件必须包裹所有的导航器结构。通常我们会在应用程序的根部渲染这个组件这通常是从App.js导出的组件 import {NavigationContainer} from react-navigation/native; import {SafeAreaProvider} from react-native-safe-area-context;安装的库是导航器的构建块和共享基础3.第三步 npm install react-navigation/native-stackreact-navigation/native-stack依赖于react-native-screens和上面安装的其他库在App.jsx文件中引入 import { createNativeStackNavigator } from react-navigation/native-stack;4.安装底部tab切换 npm install react-navigation/bottom-tabsTab.Navigator组件的screenOptions属性用于设置所有Tab.Screen组件的默认选项和样式。下面是一些常用的样式选项

• tabBarStyle设置标签栏的样式可以包括backgroundColor、height、borderTopWidth等。
• tabBarActiveTintColor设置活动标签的文本颜色。
• tabBarInactiveTintColor设置非活动标签的文本颜色。
• tabBarLabelStyle设置标签的文本样式可以包括fontFamily、fontSize、fontWeight等。
• tabBarIconStyle设置标签图标的样式可以包括width、height、tintColor等。
• tabBarIndicatorStyle设置标签栏指示器的样式可以包括backgroundColor、height等。
• tabBarPressColor设置标签栏被按下时的颜色。
• tabBarPressOpacity设置标签栏被按下时的不透明度。Tab.Screen组件的options属性用于设置选项可以通过它来自定义标签页的外观和行为。下面是一些常用的设置项
• tabBarLabel标签页的显示文本。
• tabBarIcon标签页的图标可以使用图标组件或自定义图标。
• tabBarVisible设置标签页是否可见。
• tabBarAccessibilityLabel设置标签页的辅助功能标签。
• tabBarTestID设置标签页的测试ID用于测试目的。
• tabBarBadge设置标签页的徽章显示在图标上并可以用于显示未读消息数等。
• tabBarBadgeStyle设置标签页徽章的样式。
• tabBarButtonComponent自定义标签页的按钮组件。
• tabBarOnPress点击标签页时触发的回调函数。页面之间的跳转逻辑 navigation.popToTop();//返回顶部页面navigation.goBack(2,{}); // 返回到第二个页面navigation.navigate(Fourth,{});//跳转到对应页面import {useNavigation} from react-navigation/native; const navigation useNavigation(); navigation.navigate(List);import { useRoute } from react-navigation/native; const route useRoute(); route.params添加 npm install react-native-gesture-handler 自定义头部样式 1.headerStyle一个应用于包裹标题的View的样式对象。如果在上面设置了backgroundColor那么标题的颜色将为该颜色- backgroundColor标题栏的背景颜色。
• borderBottomColor标题栏底部边框的颜色。
• borderBottomWidth标题栏底部边框的宽度。
• height标题栏的高度。2.headerTintColor 返回按钮和标题都使用此属性作为它们的颜色。在下面的示例中我们将tintColor设置为白色#fff以使返回按钮和标题为白色。- 颜色名称您可以使用预定义的颜色名称如red、blue、green等。
• 十六进制值您可以使用十六进制颜色代码如#FF0000代表红色。
• RGB值您可以使用RGB值来指定颜色如rgb(255, 0, 0)代表红色。3.headerTitleStyle属性用于自定义标题的样式可以设置以下样式属性- fontFamily标题的字体族名称如Arial、Helvetica等。
• fontWeight标题的字重如bold、normal等。
• fontSize标题的字号大小。
• color标题的颜色。
• textAlign标题的对齐方式如left、center、right等。
• textTransform标题的文本转换方式如uppercase、lowercase等。
• letterSpacing标题的字间距。
• lineHeight标题的行高。判断不同设备平台代码示例 const refreshControl Platform.select({ios: RefreshControlIOSrefreshing{refreshing}onRefresh{handleRefresh}/,android: RefreshControlrefreshing{refreshing}onRefresh{handleRefresh}/ });安装 Axios npm install axios安装本地简单存储工具 1.第一步 npm install react-native-async-storage/async-storage2.第二步 导入库并使用AsyncStorage import AsyncStorage from react-native-async-storage/async-storage;// token模块 const TokenKey windoentToken; //存储数据 export const setToken async value {await AsyncStorage.setItem(TokenKey, value); };//获取数据 export const getToken async () {try {const value await AsyncStorage.getItem(TokenKey);return value;} catch (error) {return null;} };//删除数据 export const removeToken async () {await AsyncStorage.removeItem(TokenKey); }; 安装轮播图 npm install react-native-swiper安装 Toast 消息弹出框 1.安装 npm install –save react-native-toast-message2.在App.jsx中注册全局 // App.jsx import Toast from react-native-toast-message;export function App(props) {return ({/* … */}Toast //); }3.组件中使用 import Toast from react-native-toast-message; Toast.show({type: success,//success、error、infotext1: Hello,text2: This is some something });公共信息确认框 1.在组件中引入 import ShowModal from ../../componets/ShowModel;2.在组件中注册 ShowModal ref{showModelRef} /const showModelRef useRef(null);const showMOdel () {showModelRef.current.show({title: 标题,content: 内容-加油,success: res {console.log([返回值-12], res);},});};安装线性渐变色 1.安装 npm install react-native-linear-gradient2.使用 import LinearGradient from react-native-linear-gradient; LinearGradientcolors{[#FFAA6B, #FF5B23]}start{{ x: 0, y: 0 }}end{{ x: 1, y: 0 }}style{{ flex: 1 }}View style{{ flex: 1, justifyContent: center, alignItems: center }}Text style{{ color: white, fontSize: 24 }}Hello, this is a gradient background!/Text/View /LinearGradient 安装富文本解析器 1.安装 npm install react-native-htmlview –save2.使用 import HTMLView from react-native-htmlview; render() {const htmlContent pa hrefhttp://jsdf.cohearts; nice job!/a/p;return (HTMLViewvalue{htmlContent}stylesheet{styles}/);}const styles StyleSheet.create({a: {fontWeight: 300,color: #FF3366, // make links coloured pink}, });安装下拉选择插件 React Native 0.60 https://www.npmjs.com/package/react-native-wheel-pick 1.安装 npm install react-native-wheel-pick –save-dev –legacy-peer-deps npm install react-native-picker/picker –save-dev –legacy-peer-deps npm install react-native-community/datetimepicker –save-dev –legacy-peer-deps2.安装日期 https://www.npmjs.com/package/react-native-date-picker?activeTabreadme npm install react-native-date-picker –save 安装上传图片插件 https://github.com/react-native-image-picker/react-native-image-picker 1.安装 npm install react-native-image-picker -S2.使用 import {launchCamera, launchImageLibrary} from react-native-image-picker;//点击上传图片const uploadHandle async () {const options {mediaType: photo, //photo or video or mixed(launchCamera on Android does not support mixed).quality: 0.5,selectionLimit: 1,};const response await launchImageLibrary(options);console.log([], response);if (response.didCancel) {console.log(User cancelled image picker);} else if (response.error) {console.log(ImagePicker Error: , response.error);} else if (response.customButton) {console.log(User tapped custom button: , response.customButton);} else {// Get image sourceconst files response.assets;const source {type: files[0].type,uri: files[0].uri,name: files[0].fileName,fileSize: files[0].fileSize,};// Set image sourceconsole.log([上传图片], source);}}; 类似于小程序 onShow 生命周期 import {useFocusEffect} from react-navigation/native; const [appStatus, setAppStatus] useState(true); useEffect(() {console.log([页面状态], appStatus);if (appStatus) {getInitList();}return () {// 在组件销毁时触发};}, [appStatus]);useFocusEffect(() {setAppStatus(true);return () {setAppStatus(false);};});