react-native 笔记（一）

参考地址

react-tive 官网入门

1.属性 Props

控件的标签

2.状态 state

控制控件的变化

3.样式 style

StyleSheet.create

4.宽高弹性flex

a.wight height
b.flex 近似 比重

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

flex

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

5.Flexbox布局

a.Flex Direction 主轴

column、row

b.Justify Content 主轴排列方式

flex-start、center、flex-end、space-around、space-between以及space-evenly

c.Align Items 次轴

flex-start、center、flex-end以及stretch

6.处理文本输入 TextInput

placeholder="Type here to translate!" //hint

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  state = {
    text: ''
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

7.处理触摸事件

Touchable 系列组件: TouchableHighlight(点击后变暗)、 TouchableOpacity(点击后透明度降低) TouchableNativeFeedback(Android 墨水涟漪) TouchableWithoutFeedback(点击后什么效果都没有)

  _onPressButton() {
    Alert.alert('You tapped the button!')
  }
 
   <Button
            onPress={this._onPressButton}
            title="Press Me"
          />

8.滚动视图

ScrollView

9.长列表

FlatList或是SectionList FlatList : data(数据源)和renderItem(类似 adapter) keyExtractor (类似id)

<FlatList
          data={[
            {key: 'Devin'},
            {key: 'Dan'},
            {key: 'Dominic'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
        

 <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {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}
        />

10.fetch 网络访问

async function getMoviesFromApi() {
  try {
    // 注意这里的await语句，其所在的函数必须有async关键字声明
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json',
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}


componentDidMount(){
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

10.1.番外 React：组件的生命周期

React：组件的生命周期 ReactNative 参考

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：
constructor()方法里初始化state

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

当组件在服务端被实例化，首次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

11.优质资源 reactnative 优质资源

react-tive 官网进阶

1.组件和API

官网

Toast

ActivityIndicator

npm install react-native-root-toast

 <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
 </View>

2.perform

Platform.OS : "ios" "android" Platform.Version

import { Platform, StyleSheet } from "react-native";

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

3.reactnavigation

npm install react-navigation

4 .图片

a.静态图片资源

<Image source={require('./my-icon.png')} />

packager defaults

b.使用混合 App 的图片资源

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

c.网络图片必须定义大小

<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />
       
       

<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache',
    },
    body: 'Your Body goes here',
  }}
  style={{width: 400, height: 400}}
/>

5.动画

6.调试

react-native log-android
react-native log-ios

调试官网

7.性能

8.Navigator

Navigator

//1.createStackNavigator

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

export default createAppContainer(AppNavigator);

//2

9.运行调试

1.开启

react-native start

2.vsCode

command + s //可以显示修改

2.http://localhost:8081/debugger-ui/

ipconfig 
//inet 后面就是 inet 后面就是ip

3.Android 进入APP摇动手机

Dev Settings ——> Debug server host & port for device