[React Native]跨頁參數拋轉

  • 627
  • 0

程式開發過程中,頁面轉換是一定需要的,本篇記錄了不同頁面之間的參數或物件的傳遞

當我們需要在 Apage.js 將參數或物件,拋轉給 Bpage.js 這種情境一定會有過,除非你把所有畫面都寫在同一個 js ,那這種程式碼,維護起來一定很累人。

這是Apage.js

class Area extends React.Component {
    //建構式
    constructor(props) {
        super(props);
        this.state = {
            city: null,放入要傳遞的參數
        }
    }

    //透過onPress將值傳入
    _openPage(val) {
        this.props.app.push({
            component: FactoryList,
            params: {
                city: val,//給值
            }
        })
    }
}

render() {
    return (
        <View style={[styles.item,styles.mainItemBottom,styles.mainItemTop]}>
            <View style={[styles.container]}>
                <View style={[styles.item,styles.center]}>
                    <TouchableOpacity onPress={this._openPage.bind(this,'新竹縣')}>
                        <Text style={styles.font}>新竹縣</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
}

當跳轉到Bpage.js時,就可以直接引參數
 

	render() {
		return (
			<View}>
				<Text>Welcome to {this.props.city}</Text>
			</View>
		);
	}

 

以上文章由Ryan整理,若有侵犯版權、勘誤,請來信告知