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: phần trừu tượng hóa React Native để khai báo kiểu cách sử dụng ký hiệu đối tượng Các thành phần sử dụng kiểu nào, bạn thấy bạn khơng thể có giao diện phù hợp, tham khảo tài liệu React Native thành phần phần style Để tạo Style Sheet, sử dụng phương thức Stylesheet.create ({ }) cách truyền vào đối tượng đối tượng: Style khai báo thành phần cách sử dụng kiểu hỗ trợ: 1.2 Styling the SimpleButton component: Trong phương thức kết xuất, đặt thuộc tính style thành phần View Text từ prop: 1.2 Styling the SimpleButton component: React CSS khơng có khái niệm viết tắt, chẳng hạn border: 1px solid # 000 Thay vào đó, mục khai báo riêng lẻ II Layout and Flexbox: Flexbox thuộc tính giúp chỉnh vị trí tương đối thành phần thành phần cha, sử dụng thuộc tính flexDirection, alignItems justifyContent để thiết kế layout cho vị trí component Có đối tượng Flexbox: Đối tượng bao quanh (container) view cha Đối tượng bên (items) view 2.1 Flexbox cho đối tượng cha (container) flexDirection:Sắp xếp đối tượng theo column (chiều dọc) row (chiều ngang) giá trị : row column Mặc định column justifyContent: Căn vị trí tương đối đối tượng theo trục flex Gồm giá trị: flex-start, center, flex-end, spacearound, space-between Flex-wrap : wrap | no-wrap: Thuộc tính cho phép container bọc items kích thước chúng vượt qua kích thước container Măc định no-wrap 2.2 Flexbox cho đối tượng (items) flex-grow: định nghĩa xem item dãn để lấp vào khoảng trống view cha Khi chưa có flexGrow Khi có flexGrow item có bgcolor skyblue lắp đầy view cha flex-shrink: Thuộc tính có phần ngược lại so với flex-grow, tổng item lớn view cha, thuộc tính định nghĩa tỉ lệ bị trừ Khi chưa có flexShrink view có bgColor steelblue bị đẩy xuống làm chiều cao gốc Khi có flexShrink view bgColor skyblue thu nhỏ lại vừa với hình Chương Demo 2.1 Định nghĩa Demo chuyển đăng nhập, đăng ký giải phương trình bậc đơn giản.Có thể đăng nhập liệu có sẵn, chuyển hình sang form đăng ký ngược lại.Đăng nhập sai thông báo lỗi đăng nhập chuyển sang form tính phương trình bậc thực tính tốn 2.2 Các bước thực 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 Đăng Nhập this.setState({ user })} value={this.state.user} /> this.setState({ password }) } value={this.state.password} /> { 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 mật khẩu'); } }} /> this.props.navigation.navigate('SignUp') } /> ); } } // thiết kế giao diện 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 button, Text,Textinput hình Đăng Ký this.setState({ user })} value={this.state.user} /> this.setState({ password })} value={this.state.password} /> this.props.navigation.navigate('Login')} /> ) } } //Thiết kế giao diện StyleSheet const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, textInput: { height: 40, width: '90%', borderColor: 'gray', borderWidth: 1, marginTop: } }) Giao diện đăng ký File Main.js tính phương trình bậc // 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 tốn phương trình bậc onclick = () => { var a = this.state.typedText; this.Kiemtra(a); }; Kiemtra = var a = var b = var c = var sum var d1, () => { Number(this.state.typedText); Number(this.state.typedText1); Number(this.state.typedText2); = b * b - * a * c; 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 :' + String(tong)); } else { Alert.alert( 'Có hai nghiệm : ' + 'x1 = ' + String(d1) + ' String(d2), ); } }; render() { return ( //Tạo view ,textinput { this.setState((previousState) => { return { typedText: text, }; }); }}> x2=' + { this.setState((previousState) => { return { typedText1: text, }; }); }}> { this.setState((previousState) => { return { typedText2: text, }; }); }}> {Math.sqrt(this.state.typedText)} //Sự kiện onPress tính tốn phương trình bậc this.props.navigation.navigate('Login')} /> ); } } //Làm đẹp giao diện 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 File App.js //App.js //Khai báo thư viện import React from 'react' import { StyleSheet, Platform, Image, Text, View } from 'reactnative' import { SwitchNavigator } from 'react-navigation' // import the different screens import SignUp from './SignUp' import Login from './Login' import Main from './Main' //Chuyển hình 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/ ... riêng lẻ II Layout and Flexbox: Flexbox thuộc tính giúp chỉnh vị trí tương đối thành phần thành phần cha, sử dụng thuộc tính flexDirection, alignItems justifyContent để thiết kế layout cho vị... this.props.navigation.navigate(''SignUp'') } /> ); } } // thiết kế giao diện StyleSheet const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ''center'', alignItems: ''center'',... => this.props.navigation.navigate(''Login'')} /> ) } } //Thiết kế giao diện StyleSheet const styles = StyleSheet.create({ container: { flex: 1, justifyContent: ''center'', alignItems: ''center''