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={{width: 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