//style.js
//額外建立一個JS檔叫 style 內容就如下列描述
//將它建立為一個模組來做為引用使用
import {StyleSheet} from 'react-native';
module.exports = StyleSheet.create({
container: {
backgroundColor: #ffff00,
flex:1
},
header: {
paddingTop: 10,
height:20,
borderBottomColor: #ff00ff,
borderBottomWidth: 1,
},
....
....
});
//App.js
//宣告引用外部style
import styles from './style';
//App.js
<View style={styles.container}></View>
//App.js
import React, { Component } from 'react';
import Abc from './src/Abc';
import {
Platform,
StyleSheet,
Text,
View,
Button,
Navigator,
Modal,
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { pageIndex : 0 }
}
page1(){this.setState({pageIndex:1});}
//利用每次 setState 更新 render 指到不同內容
render() {
switch(this.state.pageIndex)
{
case 0 :
return (
<View style={styles.container}>
<Text style={styles.welcome}>
000000
</Text>
<Button
onPress={ this.page1.bind(this)}
title="Learn More"
color="#841584"
/>
</View>
);
case 1 :
return <Abc/>//注意組件名稱一定要大寫
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//Abc.js
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class Abc extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
222222
</Text>
</View>
);
}
}
//注意:CSS一定要賦予文字高度大小,否則文字無法顯示
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//例子1
import { a4 } from './src/abc';
//abc.js
export function a4(){
return global.a88;
}
//單獨引用一個外部JS function 時的情況
//各位可以注意到 可被外部引用的function 前面加上 export
//讓function可選擇被封裝在JS裡或被外部呼叫引用
//例子2
import { a4,a5 } from './src/abc';
//abc.js
export function a4(){
return global.a88;
}
export function a5(){
return 23;
}
//一次引用兩個外部JS function情況
//例子3
//App.js
import * as abc from './src/abc';
render() {
console.log(this.setState.a7);
return (
{ console.log(abc.a4()) }
{ console.log(abc.a5()) }
);
}
//abc.js
export function a4(){
return global.a88;
}
export function a5(){
return 23;
}
//如果太多function不可能一個一個引用
//以上例子一次引用全部 將abc.js 給於 abc
var a = 1;
a = 2 ;
//例子1
const a1 = 0 ; //常數宣告,不可重覆指定
//例子2
let a1 = 0 ; //可重覆指定
//例子3
global.a1 = 0 ; //全域變數,故名只要引用進來的JS都可以享受到此變數
//例子4
export default class App extends Component {
constructor(props){
super(props);
this.state = { a1 : 2 };
this.setState = ({ a1 : 3 });
}
test1(){
this.setState ({ a1 : 4 });
console.log( this.setState.a1 ); //4
console.log( this.state.a1); //2
}
render(){
return (
{ this.test1() }
)
}
}
react native 設定變數 還有另一種形式
它是屬於組件內自己的內部的變數定義與給定值
這裡可以觀察到 在建構子
做 this.state 設定 a1 給與值2
this.setState 設定 a1 給與值3
之後在 test1()呼叫後
嘗試重新給與 this.setState a1 值 4
//例子5
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on our keyboard to reload,\n' +
'Shake or press menu buttyon for dev menu',
});
let ab = 0;
let a1 = 1;
let t2 = 0;
global.a88 = 36;
export default class App extends React.Component {
constructor(props) {
super(props);
//onsole.log(a89);
//{ setTimeout(function(){navigate("abc")}, 1000); }
this.setState = ({ a7: 2 });
setTimeout(function(){this.setState = ({ a7 : 3 });console.log(this.setState.a7)}, 1000);
}
針對變數的宣告擺放在JS裡位置
我們這裡再給出更多例子
同一般傳統JS概念,一樣也可以在任何位置擺放變數
//例子6
export default class App extends React.Component {
constructor(props) {
super(props);
}
}
let ab = 0;
let a1 = 1;
let t2 = 0;
global.a88 = 36;
變數設定在預設主架構前後
呼叫時不受影響
推測編譯時跟傳統JS一樣,會先由外而內
將變數設定完,才去跑主架構
//例子7
let ab = 0;
let a1 = 1;
let t2 = 0;
global.a88 = 36;
function a8(){
let a1 = 39;
return a1;
}
export default class App extends React.Component {
constructor(props) {
super(props);
}
testf01(){
let a1 = 12;
return a1;
}
}
以上例子表達
如傳統我們認知的JS一般
變數擺在函式外
同一隻JS旗下所有函數都可以共享使用
而擺在函式fun內當然只能內部自己使用
//App.js
global.a88 = 36;
//src/abc.js
function a02(){
return global.a88 ;
}
全域變數的廣播
被引用進來的JS都可以享受到 全域global變數
其他要帶入非全域global變數
跟一般JS概念一樣
fun傳入值做設定