Мобильді қосымшаны құру. Информатика, 11 сынып, презентация.

import React, { Component } from 'react';

import { Text} from 'react-native';

export default class HelloWorldApp extends Component {

render() {

return (

<Text>Hello, world!Text>

);

}

}

https://facebook.github.io/react-native/

https://snack.expo.io/

Көптеген компоненттер құру кезінде әртүрлі параметрлер арқылы бапталуы мүмкін. Бұл параметрлер props (реквизиты) деп аталады.

Мысалы React Native-тің басты компоненті Text:

<Text style={{fontSize: 20, color: 'red', textAlign: 'center'}}>Hello, world!Text>

style – бұл реквизит, Text компонентінің қасиеттерін өзгерту үшін қолданылады, CSS-тегідей

Реквизитті қолдану синтаксисі:

prop_name = {{определение свойств}}

View – Қолданушы интерфейсін құру үшін арналған фундаментальды компонент.

Реквизиты (props):

backgroundColor

height

width

flex

alignItems

justifyContent

Тапсырма 1.

import React, { Component } from 'react';

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

export default class HelloWorldApp extends Component {

render() {

return (

<View >

<Text style={{fontSize: 20, color: 'red', textAlign: 'center'}}>КрасныйText>

<Text style={{fontSize: 24, color: 'yellow', textAlign: 'center'}}>ЖелтыйText>

<Text style={{fontSize: 28, color: 'green', textAlign: 'center'}}>ЗеленыйText>

View>

);

}

}

import React, { Component } from 'react';

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

export default class HelloWorldApp extends Component {

render() {

return (

<View style={{ flex: 1,

backgroundColor: 'lightgray',

alignItems: 'center',

justifyContent: 'space-around',

}}>

<Text style={{fontSize: 20, color: 'red', textAlign: 'center'}}>КрасныйText>

<Text style={{fontSize: 24, color: 'yellow', textAlign: 'center'}}>ЖелтыйText>

<Text style={{fontSize: 28, color: 'green', textAlign: 'center'}}>ЗеленыйText>

View>

);

}

}

Тапсырма 2

<View style={{flex:1}}>

<View style={{

flex: 0.4,

backgroundColor: 'blue',

alignItems: ‘center',

justifyContent: 'flex-end'}}>

<Text style={{fontSize: 20, color: 'red', textAlign: 'center'}}>КрасныйText>

<Text style={{fontSize: 24, color: 'yellow', textAlign: 'center'}}>ЖелтыйText>

<Text style={{fontSize: 28, color: 'green', textAlign: 'center'}}>ЗеленыйText>

View>

<View style={{

flex: 0.6,

backgroundColor: 'gray',

alignItems: ‘center',

justifyContent: 'flex-start'}}>

<Text style={{fontSize: 20, color: 'red', textAlign: 'center'}}>КрасныйText>

<Text style={{fontSize: 24, color: 'yellow', textAlign: 'center'}}>ЖелтыйText>

<Text style={{fontSize: 28, color: 'green', textAlign: 'center'}}>ЗеленыйText>

View>

View>

Тапсырма 3

TextInput

<TextInput style = {{height: 40, width: 200, borderWidth: 1}} />

<Image

source={{uri: '…'}}

style={{width: 80, height: 80}}

/>

<View style={{

alignItems: 'center'}}>

<Image

source={{uri: 'http://civility.ru/wp-content/uploads/2011/08/Znakomstvo.jpg'}}

style={{width: 80, height: 80}}

/>

<Text style={{fontSize: 16, color: 'green'}}>Ваше имя:Text>

<TextInput

style={{

height: 15,

width: 150,

borderWidth: 1,

borderColor: 'yellow',

textAlign: 'center',

borderRadius:5,

fontSize: 14

}}

placeholder={'Введите имя'}

/>

View>

Тарсырма 4

<TouchableOpacity>ОКTouchableOpacity>

export default class HelloWorldApp extends Component {

constructor(props) {

super(props);

this.state = { name: '' };

}

onPress = () => {

this.setState({

z: 'Hello, '+this.state.name+'!',

});

};

render() {

return (

<View style={{

alignItems: 'center'}}>

<Image

source={{uri: 'http://civility.ru/wp-content/uploads/2011/08/Znakomstvo.jpg'}}

style={{width: 80, height: 80}}

/>

<Text style={{fontSize: 16, color: 'green'}}>Ваше имя:Text>

<TextInput onChangeText = {(value) => this.setState({name: value})}

style={{

height: 15,

width: 150,

borderWidth: 1,

borderColor: 'yellow',

textAlign: 'center',

borderRadius:5,

fontSize: 14

}}

placeholder={'Введите имя'}

/>

<TouchableOpacity onPress={this.onPress}>ОКTouchableOpacity>

<Text>{this.state.z}Text>

View>

);

}

}

Төмендегі қолданушы интерфейсінің

программасын талқылаңыз

?

Feedback

3 things you learned

2 interesting things

Feedback

https://www.w3schools.com/react/default.asp

https://facebook.github.io/react-native/ and

https://snack.expo.io/

https://www.youtube.com/watch?v=tz_pOxQFcdo&list=PLth6QPteH5guFUwQj1iCdu-SOZ7O5KCz4