React Native学习笔记（二）————（RN）初始化项目

import {Dimensions} from 'react-native';
const windowWidth=Dimension.get('window').width;
const windowHeight=Dimension.get('window').height;

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';

export default class DimensionsTest extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <View style={styles.itemBase}>
          <Text style={styles.h3}> 首页 </Text>
        </View>
        <View style={styles.itemBase}>
          <Text style={styles.h3}> 分类 </Text>
        </View>
        <View style={styles.itemBase}>
          <Text style={styles.h3}> 动态 </Text>
        </View>
        <View style={styles.itemBase}>
          <Text style={styles.h3}> 筛选 </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flexDirection:'row',
  },
  itemBase:{
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'pink',
    //获取窗口的宽度然后分4份
    width:Dimensions.get('window').width / 4,
    height:90,
    borderWidth:1,
    borderColor:'yellow',
    //设置字体无效，因为RN不存在继承，需要单独设置
    fontSize:25,
  },
  h3:{
    fontSize:24,
  },
});

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, StyleSheet, View , Image, ScrollView, TextInput} from 'react-native';

export default class CoreComponent  extends Component {
  render() {
    return (
        <ScrollView>
        <Text>Some text</Text>
        <View>
          <Text>Some more text</Text>
          <Image
            source={{
              uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
            }}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{ width: 200, height: 200 }}
          />
        </View>
        <TextInput
          // eslint-disable-next-line react-native/no-inline-styles
          style={{
            height: 40,
            borderColor: 'gray',
            borderWidth: 1,
          }}
          defaultValue="You can type in me"
        />
      </ScrollView>
    );
  }
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const styles = StyleSheet.create({});

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

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
})

import React, {Component} from 'react';
    import {
        StyleSheet,
        View,
        Text,
        ActivityIndicator,
    } from 'react-native';
    export default class ActivityIndicatorDemo extends Component {

    render() {
        return (
            <View style={{flex:1}}>
                <View style={{flexDirection:'row'}}>
                    <Text>全部默认：</Text>
                    <ActivityIndicator />
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>添加背景色：</Text>
                    <ActivityIndicator style={{backgroundColor:'blue'}}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>animating=false （隐藏）：</Text>
                    <ActivityIndicator animating={false}/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>设置color：</Text>
                    <ActivityIndicator color='red'/>
                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>size small：</Text>
                    <ActivityIndicator size="small"/>
                    <Text>size large：</Text>
                    <ActivityIndicator size="large"/>

                </View>
                <View style={{flexDirection:'row'}}>
                    <Text>view props属性设置：</Text>
                    <ActivityIndicator style={{height:100,width:80,backgroundColor:'black'}} />

                </View>
            </View>
        );
    }
    }

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Image, StyleSheet, Dimensions} from 'react-native';

export default class ImageDemo extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <Image style={[styles.items]} source={require('./images/logo.jpg')} />
        <Image
          style={styles.tinyLogo}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        />
        <Image
          style={styles.logo}
          source={{
            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  items:{
    height:200,
    width:Dimensions.get('window').width,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  TextInput,
  Dimensions,
  Button,
  Alert,
} from 'react-native';

export default class TextInputDemo extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }
  doLogin = () => {
    Alert.alert(this.state.username);
  };
  render() {
    return (
      <View style={[styles.containers]}>
        <TextInput
          value={this.state.username}
          style={[styles.input]}
          placeholder="请输入用户名"
          onChangeText={_val => {
            this.setState({username: _val});
          }}
        />
        <TextInput
          style={[styles.input]}
          placeholder="请输入密码"
          value={this.state.password}
          //保护密码
          secureTextEntry={true}
          onChangeText={_val => {
            this.setState({password: _val});
          }}
        />

        <TextInput
          style={[styles.input]}
          placeholder="请输入手机号"
          //数字键盘
          keyboardType="number-pad"
        />

        <TextInput
          style={[styles.input]}
          placeholder="文本域"
          multiline={true}
          numberOfLines={5}
          textAlignVertical="top"
        />
        <View>
          <Button title="登录" onPress={this.doLogin} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  containers: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    width: Dimensions.get('window').width - 20,
    margin: 10,
    borderWidth: 1,
    borderColor: 'red',
    paddingHorizontal: 5,
  },
});

/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, StyleSheet, View, TouchableHighlight, Alert, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';

export default class TouchaleDemo extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <TouchableHighlight onPress={()=>{
           Alert.alert('触碰高亮显示');
        }} >
        <View>
              <Text style={[styles.item]}> 触碰高亮 </Text>
        </View>
        </TouchableHighlight>

        <TouchableOpacity onPress={()=>{
           Alert.alert('触碰透明的变化');
        }}>
        <View>
              <Text style={[styles.item]}> 触碰透明的变化 </Text>
        </View>
        </TouchableOpacity>

        <TouchableWithoutFeedback onPress={()=>{
           Alert.alert('触碰无效');
        }}>
        <View>
              <Text style={[styles.item]}> 触碰无效 </Text>
        </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}


const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    item:{
        marginBottom:20,
        padding:10,
        borderWidth:1,
        borderColor:'red',
    },
});

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  SafeAreaView,
  ScrollView,
  StatusBar,
  View,
} from 'react-native';

export default class ScrollViewDemo extends Component {
  render() {
    return (
       
      <SafeAreaView style={styles.container}>
        <ScrollView
        style={styles.scrollView}
        //隐藏滚动条
        showsVerticalScrollIndicator={false}
        >
          <Text style={styles.text}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </Text>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import { StyleSheet,
    Text,
    View,
    SafeAreaView,
    SectionList,
    StatusBar} from 'react-native';

export default class SectionListDemo extends Component {
     DATA = [
        {
          title: 'Main dishes',
          data: ['Pizza', 'Burger', 'Risotto'],
        },
        {
          title: 'Sides',
          data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
        },
        {
          title: 'Drinks',
          data: ['Water', 'Coke', 'Beer'],
        },
        {
          title: 'Desserts',
          data: ['Cheese Cake', 'Ice Cream'],
        },
      ];
  render() {
    return (
        <SafeAreaView style={styles.container}>
        <SectionList
          sections={this.DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({item}) => (
            <View style={styles.item}>
              <Text style={styles.title}>{item}</Text>
            </View>
          )}
          renderSectionHeader={({section: {title}}) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
      </SafeAreaView>
    );
  }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        marginHorizontal: 16,
      },
      item: {
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
      },
      header: {
        fontSize: 32,
        backgroundColor: '#fff',
      },
      title: {
        fontSize: 24,
      },
});