zoukankan      html  css  js  c++  java
  • RN-入门基础

    Props

    State

      一切界面变化,都是state变化

      state修改必须通过setState方法

        this.state.like=true 这样复制无效

        setState是一个merge合并的操作,只修改指定属性,不影响其他属性

        setState是异步操作

    样式

      通过StyleSheet.create来管理样式

    <Text style={styles.bigBlue}>just bigBlue</Text>
    <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
    
    const styles = StyleSheet.create({
      bigBlue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
      },
      red: {
        color: 'red',
      },
    });

    高度和宽度

      在RN中尺寸是无单位的

    <View style={{ 50, height: 50, backgroundColor: 'powderblue'}} />

    Flexbox布局

      flex:1

      flexDirection, justifyContent, alignItems 这三个属性可以满足大部分布局

      但是RN中flexDirection的默认属性时column

    文本

      TextInput允许用户输入文本

      onChangeText属性时文本放生变化被调用

    <TextInput
      style={{height: 40}}
      placeholder="Type here to translate!"
      onChangeText={(text) => this.setState({text})}
    />

    触摸事件

      Button是一个跨平台按钮

      点击按钮会调用onPress

      Touchable系列组件

        TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback

    滚动试图

      ScrollView,会渲染所有组件,只适合数量不多的滚动元素

    <ScrollView>...</ScrollView>

    长列表

      FlatList

        两个重要属性 data/renderItem/keyExtractor

    <FlatList
            data={movies}
            keyExtractor={item => item.id}
            renderItem = {this.renderMovies}
          />
      renderMovies({item}) {
        return (
          <View style={styles.container}>
            <Image source={{uri: item.posters.thumbnail}} />
            <View>
              <Text>{item.title}</Text>
              <Text>{item.year}</Text>
            </View>
          </View>
        )
      }

      SectionList

    <SectionList
              sections={[
                {title: 'D', data: ['Devin']},
                {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
              ]}
              renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
              renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
              keyExtractor={(item, index) => index}
            />

    fetch

      RN自带网络请求

    fetch('https://mywebsite.com/endpoint/', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        firstParam: 'yourValue',
        secondParam: 'yourOtherValue',
      }),
    });

    封装成Promise

    getRequest(url, method = 'GET'){
        return new Promise((resolve, reject) => {
          return fetch(url, {
            method
          })
          .then(res => res.json())
          .then(resJson => resolve(resJson))
          .catch(err => reject(err))
        })
      }

    当然可以使用第三方axios

    RN组件

      RN内置组件

        View/Text/Image/TextInput/ScrollView/StyleSheet

      交互控件

        Button/Picker/Slider/Switch

      列表组件

        FlatList/SectionList

    特定平台代码

      可以使用Platform模块

    case1 样式

    const styles = StyleSheet.create({
      height: Platform.OS === "ios" ? 200 : 100
    });

    case2 样式

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        ...Platform.select({
          ios: {
            backgroundColor: "red"
          },
          android: {
            backgroundColor: "blue"
          }
        })
      }
    });

    case3 组件

    const Component = Platform.select({
      ios: () => require("ComponentIOS"),
      android: () => require("ComponentAndroid")
    })();
    
    <Component />;

    特点平台扩展名

    项目中创建

    BigButton.ios.js
    BigButton.android.js

    去掉平台扩展名

    import BigButton from './BigButton';

    检测Android版本

    if (Platform.Version === 25) {
      console.log("Running on Nougat!");
    }

    检测iOS版本

    const majorVersionIOS = parseInt(Platform.Version, 10);
    if (majorVersionIOS <= 9) {
      console.log("Work around a change in behavior");
    }

     获取屏幕分辨率

    Dimensions.get('window').width
  • 相关阅读:
    lucene学习-创建索引
    ExtJs学习-搭建开发环境
    Struts2上传文件(1)
    使用USBWriter做U盘启动盘后U盘在盘中不显示的解决办法(轉載)
    家里旧电脑装了centos7實踐思路
    win7/win10下装centos7双系统(转载)
    美区google play礼品卡,如何正确充值到美区google play余额,并能购买游戏道具
    excel 2016 打开UTF-8编码CSV文件乱码的问题UTF-8编码CSV文件乱码的问题
    python3 writerow CSV文件多一个空行
    python3 UnicodeEncodeError: 'gbk' codec can't encode character 'xa0' in position 4400: illegal multibyte sequence
  • 原文地址:https://www.cnblogs.com/sonwrain/p/10738130.html
Copyright © 2011-2022 走看看