react-native專案經驗
修改埠號：node_modules\react-native\local-cli\server\server.js
生成apk：react-native run-android --variant=release
編譯專案：react-native start
- 宣告樣式：var styles=StyleSheet.create({
base:{width:38,height:38},
background:{backgroundColor:’#222’},
active:{borderWidth:2,borderColor:#ccc},
})
- CSS的命名“-”連字元改成駝峰寫法，長度不加單位“px”，字串比如色值需要加引號寫成字串。
- 標籤定義樣式：<View style={styles.base}/>
定義多個樣式：<View style={[styles.base,styles.background]}/>
在兩個樣式裡面內容有衝突的時候，以右邊的值優先，還可以加判斷此樣式在什麼條件下會顯示：<View style={[styles.base,this.state.active&&styles.active]}
&&左邊是true/false 右邊是樣式
- 隱藏頭部：static navigationOptions = () => ({ headerStyle: {display:'none'}})
- 跳轉頁面傳引數：<TouchableOpacity style={styles.login} onPress={() => {navigate('Procedure',{ user:'this.state.user', pwd:'this.state.pwd' } );}}> 傳引數方法
- 自己建的元件名首字母大寫
- 返回上一級：this.props.navigation.goBack()
- 迴圈元件：{this.state.procedure.map((info, index) => (
<Procedure info={info} key={index}></Procedure>
))}
Procedure為將要迴圈的陣列
- 強制重新整理：this.forceUpdate();
- TextInput只能是數字： keyboardType='numeric'
- 點選函式呼叫介面 函式前加：async 函式名第一個字母大寫 呼叫程式碼前加：await
- 進入頁面後做事情：componentDidMount(){ }
- 返回頁面重新整理頁面：A頁面跳到B頁面 B頁面返回A頁面時 A頁面重新整理
A頁面寫：componentDidMount() {
this.listener = DeviceEventEmitter.addListener('Updata',(e)=>{
alert(e)
這裡寫需要更新的函式
});
}
componentWillUnmount(){
this.listener.remove();
}
B頁面寫：DeviceEventEmitter.emit('Updata');
- onPress={this.settings.bind(this)} 把控制元件的this和函式的this繫結成一個this 點選如果加.bind就需要把this傳過去
- 對齊方式：
a) justifyContent:'flex-start', // 左對齊，預設值
b) justifyContent:'flex-end', // 右對齊
c) justifyContent:'center', // 居中
d) justifyContent:'space-between', // 兩端對齊，專案之間間隔相等
e) justifyContent:'space-around', // 每個專案兩端的間隔相等。所以專案間的間隔比專案與邊框的間隔大一倍
f) alignItems:'flex-start', // 交叉軸起點對齊
g) alignItems:'flex-end', // 交叉軸終點對齊
h) alignItems:'center', // 交叉軸中點對齊
i) alignItems:'baseline', // 專案第一行文字的基線對齊
j) alignItems:'stretch', // 如果專案未設定高度或設為auto，將佔滿整個容器的高度
- TextInput 標籤：
underlineColorAndroid='transparent' 去掉下劃線
- 父級頁面往自己頁面傳屬性或者值 需要更改父級頁面呼叫時的key值 否則不會重新整理
例：<ScanList info={info} key={index+""+this.state.showPop} show={this.state.showPop} navigation={this.props.navigation}/>
- 內容橫向排列 ：flexDirection: 'row', 內容到尾部自動換行：flexWrap:'wrap',
- Pda呼叫掃描：安裝DeviceEventEmitter 外掛 在檔案上面引入：DeviceEventEmitter
a) 開啟掃描：LeZhanTools.openScan(); LeZhanTools.Vibrate(1);
b) 關閉掃描：LeZhanTools.closeScan();
c) 讀取掃描出來的資訊：DeviceEventEmitter.addListener('ScanCode', function(e: Event) {
d) alert(JSON.stringify(e)+"222222222")
e) });
- ref={(e)=>{this.ModalDropdown2 = e}} 在需要操作這個標籤的函式裡面寫this.ModalDropdown2.select(0) 這樣就可以操作這個標籤擁有的函數了
- 判斷某個元素顯示不顯示：{this.state.show?null:<Text>這是條件語句</Text>}
- 按返回鍵觸發函式:
BackHandler在上面引入。from 'react-native'
componentDidMount() {
this.listenerhardwareBackPress=BackHandler.addEventListener('hardwareBackPress', ()=> {
this.backClick();
return true;
});
}
- 如果ScrollView標籤不能自適應高度 則在最外層標籤加 flex:1的樣式
- 子元件呼叫父元件函式：父元件：<List back={this.BackClick.bind(this)}></List>
子元件：back(){ this.props.back()}
- 點選函式跳轉頁面：onPress={this.login.bind(this)};login(){const{navigate}= this.props.navigation;navigate('Procedure');}
- 禁止重複點選：修改原始碼
位於：../node_modules/react-navigation/src/addNavigationHelper.js
修改如下：
......
......
export default function<S: {}>(
navigation: NavigationProp<S>
): NavigationScreenProp<S> {
/* ------------此處為新增的程式碼--------- */
let debounce = true;// 定義判斷變數
/* ------------此處為新增的程式碼--------- */
return {
...navigation,
goBack: (key?: ?string): boolean => {
let actualizedKey: ?string = key;
if (key === undefined && navigation.state.key) {
invariant(
typeof navigation.state.key === 'string',
'key should be a string'
);
actualizedKey = navigation.state.key;
}
return navigation.dispatch(
NavigationActions.back({ key: actualizedKey })
);
},
navigate: (
routeName: string,
params?: NavigationParams,
action?: NavigationNavigateAction
/* ------------此處為修改後的的程式碼--------- */
): boolean =>{
if (debounce) {
debounce = false;
navigation.dispatch(
NavigationActions.navigate({
routeName,
params,
action,
}),
);
setTimeout(
() => {
debounce = true;
},
5000,
);
return true;
}
return false;
},
/* ------------此處為修改後的的程式碼--------- */
......
- 橫向進出頁面：const HelloRN = StackNavigator({
},{
transitionConfig: horizontalInterpolator
})
上面定義：const horizontalInterpolator = () => ({screenInterpolator: CardStackStyleInterpolator.forHorizontal})
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
- 文字超出…顯示:
{this.state.inner1Con ? (this.state.inner1Con.length > 7 ? this.state.inner1Con.substr(0, 7) + "..." : this.state.inner1Con) : "請選擇"}
- 虛線:
<View style={styles.lineDashed}></View>
lineDashed:{
width:width,
height:0,
borderWidth:1,
borderColor:'#ccc',
borderStyle:'dashed',
borderRadius:0.1,
},
- 左滑刪除:
import { Switch,SwipeAction } from 'antd-mobile-rn';
const right = [{
text: '刪除',
onPress: () => alert('delete'),
style: { backgroundColor: 'red', color: 'white' },
},];
<SwipeAction autoClose right={right}>
<Text>這行左滑刪除</Text>
</SwipeAction>
- 檢測裝置是否聯網
import { NetInfo } from 'react-native';
//檢測網路是否連線
NetInfo.isConnected.fetch().done((isConnected) => {
alert(isConnected + '==檢測網路是否連線')
});
//檢測網路連線資訊
NetInfo.fetch().done((connectionInfo) => {
alert(connectionInfo + '==檢測網路連線資訊')
});
//監聽網路變化事件
NetInfo.addEventListener('change', (networkType) => {
alert(networkType + '==監聽網路變化事件')
})
ANT UI
- onClick={() => this.orderClick()}
- 列表樣式 List標籤裡面的Item裡面的內容 手寫沒事 如果是動態資料會和之前寫死的內容不再一行 解決辦法：用Text把內容包起來<Text style={{fontSize:17}}>訂單號：{info.con}</Text>