笔记瑞客29rn第一节react native课程大纲

ReactNaitve学 ReactNaitveReactNative介绍Developer在模拟器上开启DeveloperEnableLiveReloadErrorsandWarningsChromeDeveloperFlexin在Android上支持GIF和WebP格式ReactNativeVisualStudioCode、WebStorm；移动端开发软件：Xcode、AndroidStudioNodeJSReactReactNativeFlex布局与样式掌握ReactNative的组件和API掌握ReactNativeReactNativeReactNaitve的简介：在React.jsConf2015大会上推出的一个用于开发Android和iOSApp的在ReactNative出现前，我们通常会选择这三种移动技术（NativeApp、HTML5、Hybrid）之一进行在资讯等一些强排版、弱交互的展示类App上大展拳脚。但由于WebView在移动设备上的真正适合跨平台的开发。HybridApp兼具了NativeApp良好用户体验的优势，也兼具了WebApp问设备、无法更新。ReactNative：底层引擎是JavaScriptCore，但调用的是原生的组件而非HTML5组件。这样NaviveAppJavaScript代码可以使用后端强大的Web方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。ReactNative优缺点：Web端，Android端和iOSlearnonce,writeeverywhere：ReactNative不强求一份原生代码支持多个平台，所以不是writeonce,runanywhere；reactnative在iOSiOS7以上，Android仅支持Android4.1ReactNativevsFluttervsWeexreact-nativeinit(名称不可使用连接符等特殊字符,命名可以参考APP应用名称比如)cdcdreact-nativerun-iosorreact-nativerun- 是ReactNative给开发者定制的一个开发者菜单，来帮助开发者调试ReactNative应可以通过Command⌘+M快捷键来快速打开 以创建一个NexusS的模拟器。可以通过Command⌘+D快捷键来快速打开 Reload选项，单击Reload让ReactNative重新加载js。对于iOS模拟器Command⌘+可以通过双击提示：如果Command⌘+R无法使你的iOS模拟器加载js，则可以通过选中 Keyboard“ConnectHardwareKeyboard”EnableLive该选项提供了ReactNative动态加载的功能。当你的js代码发生变化后，ReactNative会自动生成Errorsand在development模式下，js部分的Errors和Warnings会直接打印在或模拟器屏幕上，以红屏和黄ReactNative程序运行时出现的Errors会被直接显示在屏幕上，以红色的背景显示，并会打印出错误信息。你也可以通过console.error()来手动触发Errors。ReactNative程序运行时出现的Warnings也会被直接显示在屏幕上，以黄色的背景显示，并会打印出警告信息。你也可以通过console.warn()来手动触发Warnings。你也可以通过console.disableYellowBox=true来手动禁用Warnings的显示，或者通过console.ignoredYellowBox=['Warning:...'];来忽略相应的WarningChromeDeveloper 下单击”DebugJSRemoy”启动JS调试功能。此时Chrome会被打开，同时会创建一个“.”Tab页。>选择开发者工具。你也可以通过快捷键(CommandOptionIonMac,CtrlShiftIon<View<View<Textstyle={{fontSize:16,margin:20}}>尺寸上述代码，运行在Android上时，View的长宽被解释成：100dp100dp，字体被解释成16sp，运行在RN中默认是flexDirection:'column',WebCssflex-direction:'row'RN中默认alignItems:stretch',在WebCss中默认align-items:'flex-不支持的属性：align-contentflex-basisorderflex-flowflex-growflex-FlexinflexDirection:row|column|row-reverse|column-flexWrap:wrap|noWrap//justifyContent:flex-start|flex-end|center|space-between|space-aroundalignItems:flex-start|flex-end|center|stretchauto(default)元素继承了父容器的align-item属性，如果没有则为'stretch'flex-在RNStyleSheet<View<Viewstyle={styles.container}></View>conststyles=StyleSheet.create({}<View<View<ViewimportimportReact,{Component}fromimport{ tform,StyleSheet,Text,View}from"react-onPress={onPressLearnMore//用户点击此按钮时所调用的处理函数title="LearnMore"//按钮按钮内显示的文本color="#841584"//文本的颜色(iOS)，或是按钮的背景色(Android)disabled={false}//按钮是否可以点击accessibilityLabel="Learnmoreaboutthispurplebutton"//用于给残障 <View<Viewstyle={[styles.container,size="large"//指示器的大小，默认为'small'[enum('small','large'),number]。目前只能在Android上设定具体的数值animating={true}//是否要显示指示器动画，默认为true表示显示，falsehidesWhenStopped={false//在animating为false的时候，是否要隐藏指示器（true）。如果animating和hidesWhenStoppedfalse，则显示一个静止的指示器。color="#0000ff"//滚轮的前景颜色（默认为灰色）。片、以及本地磁盘上的（如相册）等。下面的例子分别演示了如何显示从本地缓存、网络甚至是以'data:'base64uri形式提供的图style={{width:50,height://网络和base64数据 source={{uri:'style={{width:66,height://网络和base64 默认情况下Android是不支持GIF和WebP格式的。你需要在android/app/build.gradle文件中根dependenciesdependencies如果你需要支持Android4.0(APIlevel14)compile 如果你需要支持GIFcompile 如果你需要支持WebP格式，包括WebPcompile'com. compile'com. compile }：内。本组件目前仅支持iOS设备以及iOS11或更高版本。元素不再使用flexbox布局，而是采用文本布局。这意味着<Text>内部的元素不再是一个个矩ellipsizeMode={"tail"}//这个属性通常和下面的numberOfLines属性配合使用,文本超出numberOfLines设定的行数时，截取方式：head-从文本内容头部截取显示省略号。例如："...efg"，middle-在文本内容中间截取显示省略号。例如："ab...yz"，tail-从文本内容尾部截取显示省略号。例如："abcd..."，clip-不显示省略号，直接从尾部截断。numberOfLines={1}//配合ellipsizeMode设置行数onPress// >盘）,TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding:0width:height:borderWidth:3,borderColor:"blue"keyboardType={"default"}//决定弹出何种软键盘类型，譬如numeric（纯数字键 maxLengthmaxLength={20//限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁editable={true//如果为false，文本框是不可编辑的。默认值为true。defaultValue={"xxxx"}//提供一个文本框中的初始值caretHidden={true}//如果为true，则隐藏光标。默认值为false。autoCapitalize={"none"}//控制TextInput是否要自动将特定字符切换为大写:characters:所有的字符,words:每个单词的第一个字符,sentences:每句话的第一个字符（默认）,none:不切onChangeText={texttext:textclassclassMyWebextends{render(){return(source={{uri:'style={{marginTop:}/VirtualizedList：FlatList和SectionList的底层实现，VirtualizedList通过 data={[{key:'a'},{key:'b'}]}renderItem={({item})=><Text>{item.key}</Text>}ScrollView处于竖直方向的起点位置（scrollY:0），此时下拉会触发一个onRefresh常用APIletlet{height,width}=tform:平台APIimportimporttform,StyleSheet}from"react-conststyles= tform.OS==="ios"?200: tform.OS为key，从传入的对象中返回对应平台的值：constComponent= ios:()=>re