Chương iv working with styles and layout

CHƯƠNG IV Working with Styles and Layout Chương 1 Nội dụng tìm hiểu I React CSS 1 1 Style Sheet Style Sheet là phần trừu tượng hóa của React Native để khai báo các kiểu bằng cách sử dụng ký hiệu đối t[.]

CHƯƠNG IV Working with Styles and Layout

Chương 1.Nội dụng tìm hiểu

I React CSS:

1.1 Style Sheet:

 Style Sheet: là phần trừu tượng hóa của React Native để khai báo các

kiểu bằng cách sử dụng ký hiệu đối tượng Các thành phần có thể sử dụng bất kỳ kiểu nào, vì vậy nếu bạn thấy rằng bạn không thể có giao diện phù hợp, hãy tham khảo tài liệu React Native về thành phần đó trong phần style của nó.

 Để tạo một Style Sheet, hãy sử dụng phương thức Stylesheet.create ({ }) bằng cách truyền vào một đối tượng của các đối tượng:

 Style được khai báo trên một thành phần bằng cách sử dụng kiểu hỗ trợ:

1.2 Styling the SimpleButton component:

 Trong phương thức kết xuất, hãy đặt thuộc tính style của các thành

phần View và Text từ các prop:

1.2 Styling the SimpleButton component:

 React CSS không có khái niệm viết tắt, chẳng hạn như border: 1px solid # 000 Thay vào đó, mỗi mục được khai báo riêng lẻ.

II Layout and Flexbox:

 Flexbox là một thuộc tính giúp căn chỉnh vị trí tương đối của các

thành phần con trong thành phần cha, có thể sử dụng các thuộc

tính flexDirection, alignItems và justifyContent để thiết kế layout

cho vị trí các component

Có 2 đối tượng chính trong Flexbox:

 Đối tượng bao quanh (container) chính là view cha

 Đối tượng con bên trong (items) là các view con

2.1 Flexbox cho đối tượng cha (container)

 flexDirection:Sắp xếp các đối tượng con theo column (chiều dọc)

hoặc row (chiều ngang) 2 giá trị của nó là : row hoặc column Mặc định là column.

 justifyContent: Căn vị trí tương đối của đối tượng con theo trục

chính của flex Gồm các giá trị: flex-start, center, flex-end,

space-around, space-between.

 Flex-wrap : wrap | no-wrap: Thuộc tính này cho phép container bọc

các items con mặc dù kích thước của chúng vượt qua kích thước của

container Măc định là no-wrap.

2.2 Flexbox cho đối tượng con (items)

 flex-grow: định nghĩa xem item sẽ được dãn ra bao nhiêu để lấp vào

khoảng trống của view cha.



Khi chưa có flexGrow

Khi đã có flexGrow item có bgcolor skyblue sẽ lắp đầy view cha

 flex-shrink: Thuộc tính này có phần ngược lại so với flex-grow, nếu

như tổng các item lớn hơn view cha, thì thuộc tính này sẽ định nghĩa

tỉ lệ bị trừ đi

Khi chưa có flexShrink view con có bgColor steelblue sẽ bị đẩy xuống làm mất chiều cao gốc.

Khi có flexShrink view con bgColor skyblue sẽ thu nhỏ lại vừa với màn hình.

Chương 2 Demo 2.1 Định nghĩa

Demo chuyển màn đăng nhập, đăng ký và giải phương trình bậc

2 đơn giản.Có thể đăng nhập bằng dữ liệu có sẵn, chuyển màn hình sang form đăng ký và ngược lại.Đăng nhập sai sẽ thông báo lỗi và đăng nhập đúng sẽ chuyển sang form tính phương trình bậc 2 thực hiện tính toán.

2.2 Các bước thực hiện

File login.js

// Login.js

//Khai báo thư viện

import React from 'react';

import { StyleSheet, Text, TextInput, View, Button, Alert } from

'react-native';

export default class Login extends React.Component {

state = { user: '', password: '' };

render() {

return (

//Thiết kế giao diện

<View style={styles.container}>

<Text>Đăng Nhập</Text>

<TextInput

style={styles.textInput}

placeholder="Username"

onChangeText={(user) => this.setState({ user })}

value={this.state.user}

/>

<TextInput

secureTextEntry

style={styles.textInput}

placeholder="Password"

onChangeText={(password) => this.setState({ password }) }

value={this.state.password}

/>

<Button

title="Đăng nhập"

// sự kiện onPress trên nút đăng nhập kiểm tra tài khoản mật khẩu

onPress={() => {

var login = this.state.user;

var pass = this.state.password;

if (login == 'a' && pass == 'a') {

Alert.alert('Đăng nhập thành công');

this.props.navigation.navigate('Main');

} else {

Alert.alert('Sai tên đăng nhập hoặc mật khẩu'); }

}}

/>

<Button

title="Chưa có tài khoản? Đăng ký"

// sự kiện onPress chuyển màn hình sang Form Đăng ký

onPress={() => this.props.navigation.navigate('SignUp') }

/>

</View>

);

}

}

// thiết kế giao diện bằng StyleSheet

const styles = StyleSheet.create({

container: {

flex: 1

justifyContent: 'center',

alignItems: 'center',

},

textInput: {

height: 40,

width: '90%',

borderColor: 'gray',

borderWidth: 1

marginTop: 8

},

});

Giao diện Đăng nhập

File SignUp.js

// SignUp.js

//Khai báo thư viện

import React from 'react'

import { StyleSheet, Text, TextInput, View, Button ,Alert} from

react-native'

export default class SignUp extends React.Component {

state = { user: '', password: '', errorMessage: null }

render() {

return (

//Tạo các button, Text,Textinput trong màn hình

<View style={styles.container}>

<Text>Đăng K </Text>

<TextInput

placeholder="Username"

style={styles.textInput}

//sự kiện thay đổi Text trong phần username khi nhập onChangeText={user => this.setState({ user })}

value={this.state.user}

/>

<TextInput

//Ẩn mật khẩu sang dấu * secureTextEntry

placeholder="Password"

style={styles.textInput}

//sự kiện thay đổi Text trong phần password khi nhập

onChangeText={password => this.setState({ password })} value={this.state.password}

/>

<Button title="Đăng Ký" onPress={this.handleSignUp } /> <Button

title="Đã có tài khoản! Đăng nhập"

//sự kiện onPress chuyển màn hình sang form login

onPress={() => this.props.navigation.navigate('Login')} />

</View>

)

}

}

//Thiết kế giao diện bằng StyleSheet

const styles = StyleSheet.create({

container: {

flex: 1

justifyContent: 'center',

alignItems: 'center'

},

textInput: {

height: 40,

width: '90%',

borderColor: 'gray',

borderWidth: 1

marginTop: 8

}

})

Giao diện đăng ký

File Main.js tính phương trình bậc 2

// Main.js

//Khai báo thư viện

import React, {Component} from 'react';

import { StyleSheet,Text, TextInput,Button, Platform, Image, View ,Alert} from 'react-native'

export default class Main extends React.Component {

constructor(props) {

super(props);

this.state = {

typedText: '',

typedText1: '',

typedText2: '',

};

}

//sự kiện onclick tính toán phương trình bậc 2

onclick = () => {

var a = this.state.typedText;

this.Kiemtra(a);

};

Kiemtra = () => {

var a = Number(this.state.typedText);

var b = Number(this.state.typedText1);

var c = Number(this.state.typedText2);

var sum = b * b - 4 * a * c;

var d1, d2;

var tong;

tong = -b / (2 * c);

var apha = Math.sqrt(sum);

d1 = (-b + Math.sqrt(sum)) / (2 * a);

d2 = (-b - Math.sqrt(sum)) / (2 * a);

if (sum < 0) {

Alert.alert('Vô nghiệm');

} else if (sum == 0) {

Alert.alert('Có nghiệm là :' + String(tong));

} else {

Alert.alert(

'Có hai nghiệm là : ' + 'x1 = ' + String(d1) + ' x2=' + String(d2),

);

}

};

render() {

return (

//Tạo các view ,textinput

<View style={styles.container}>

<TextInput

style={{

width: 300,

height: 50,

marginTop: 10,

borderWidth: 1,

borderColor: 'gray',

}}

placeholder="Nhap A "

onChangeText={(text) => {

this.setState((previousState) => {

return {

typedText: text,

};

});

}}></TextInput>

<TextInput

style={{

width: 300,

height: 50,

marginTop: 10,

borderWidth: 1,

borderColor: 'gray',

}}

placeholder="Nhap B "

onChangeText={(text) => {

this.setState((previousState) => {

return {

typedText1: text,

};

});

}}></TextInput>

<TextInput

style={{

width: 300,

height: 50,

marginTop: 10,

borderWidth: 1,

borderColor: 'gray',

}}

placeholder="Nhap C "

onChangeText={(text) => {

this.setState((previousState) => {

return {

typedText2: text,

};

});

}}></TextInput>

<Text>{Math.sqrt(this.state.typedText)}</Text>

<View style={styles.button}>

//Sự kiện onPress tính toán phương trình bậc 2

<Button title="Tính" onPress={this.Kiemtra} />

</View>

<Button

title="Quay về"

//Chuyển màn hình sang form login

onPress={() => this.props.navigation.navigate('Login')} />

</View>

);

}

}

//Làm đẹp giao diện bằng StyleSheet

const styles = StyleSheet.create({

container: {

flex: 1

justifyContent: 'center',

alignItems: 'center',

},

button:{

width:300,

height:50,

}

});

Giao diện tính phương trình bậc 2 File App.js

//App.js

//Khai báo thư viện

import React from 'react'

import { StyleSheet, Platform, Image, Text, View } from 'react-native'

import { SwitchNavigator } from 'react-navigation'

// import the different screens

import SignUp from './SignUp'

import Login from './Login'

import Main from './Main'

//Chuyển màn hình giữa cái js

const App = SwitchNavigator(

{

Login,

SignUp,

Main

},

)

export default App

File package.json(cài đặt môi trường)

{

"dependencies": {

"react-bootstrap": "*",

"react-navigation": "^2.6.2",

"react-test-renderer": "*",

"react-native-screens": "~2.15.0"

}

}

Tài liệu tham khảo https://reactnavigation.org/