欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

我是新來的反應原生,我堅持跟隨.

我正在使用下面的代碼執行導航(當點擊警報視圖按鈕時).

const {navigation} = this.props.navigation;
…
.
.
 { text: 'Done', onPress:() => {
              navigate.push(HomeScreen);}

如何將數據傳遞到React本機中的另一個頁面？我可以聲明參數全局并只分配給它嗎？

執行此操作的正確方法是什么？我將如何進行此操作？

1> ..：

在頁面之間傳遞數據react-非常簡單。在此處的文檔中對此進行了明確說明

為了完整起見，我們創建一個小應用程序，使我們能夠從一個屏幕導航到另一個屏幕之間傳遞值。在此示例中，我們將僅傳遞字符串，但可以傳遞數字，對象和數組。

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      
    )
  }
}

.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';
const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}
const cOnfig= {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}
const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

.js 和 .js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
export default class Screen extends React.Component {
  render() {
    return (
      
      
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'

  }
});

這里我們有4個文件。在App.js這，我們將導入.js。將.js建立一個具有兩個屏幕，.js和.js。已設置為我們的初始屏幕。

在屏幕之間導航

我們可以從導航到通過使用

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

我們可以回到從使用

this.props.navigation.goBack();

所以代碼變成

export default class Screen extends React.Component {
  render() {
    return (
      
         this.props.navigation.navigate('Screen2')} />
      
    )
  }
}

并且代碼變成：

export default class Screen extends React.Component {
  render() {
    return (
      
         this.props.navigation.goBack()} />
      
    )
  }
}

現在我們可以在和之間導航

從發送值到

要在和之間發送一個值，涉及兩個步驟。首先，我們必須發送它，其次，我們必須捕獲它。

我們可以通過將其作為第二個參數傳遞來發送值。注意文本值如何包含在對象中。

this.props.navigation.navigate('Screen2', {text: 'Hello from Screen 1' });

我們可以通過執行以下操作來捕獲它，in中的第一個值是key第二個值是默認值。

const text = this.props.navigation.getParams('text','nothing sent');

所以現在變成

export default class Screen extends React.Component {
  render() {
    return (
      
         this.props.navigation.navigate('Screen2',  { 
           text: 'Hello from screen 1' 
         })} />
      
    )
  }
}

并且代碼變成：

export default class Screen extends React.Component {
  render() {
    const text =  this.props.navigation.getParam('text', 'nothing sent')
    return (
      
        {text}
        

         title={'Go back'} 
         OnPress={() => this.props.navigation.goBack()} />
      
    )
  }
}

將值從發送回

我發現，從發送的值最簡單的方法來是一個函數傳遞給來自將在更新狀態與價值要發送

因此html頁面之間傳遞數據，我們可以更新為如下所示。首先，我們在狀態中設置一個初始值。然后，我們創建一個將更新狀態的函數。然后，我們將該函數作為參數傳遞。我們將在Text組件中顯示捕獲的值。

export default class Screen1 extends React.Component {
  state = {
    value: ''
  }
  receivedValue = (value) => {
    this.setState({value})
  }
  render() {
    return (
      
         this.props.navigation.navigate('Screen2', {
            text: 'Hello from Screen 1', 
            receivedValue: this.receivedValue } 
            )} />
          {this.state.value}
      
    )
  }
}

注意，我們傳遞函數的方式與傳遞text早期函數的方式相同。

現在，我們必須抓住其中的價值，并且以與以前非常相似的方式來做到這一點。我們用來獲取值，記住要設置默認值。然后，當我們按下“返回”按鈕時，我們將對其進行更新以首先調用該函數，并傳入要發送回的文本。

export default class Screen2 extends React.Component {
  render () {
    const text =  this.props.navigation.getParam('text', 'nothing sent');
    const receivedValue = this.props.navigation.getParam('receivedValue', () => {});
    return (
      
         {
            receivedValue('Hello from screen 2')
            this.props.navigation.goBack()
          }} />
          {text}
      
    );
  }
}

替代使用

可能不使用該方法，而是直接訪問值。如果要這樣做，則無法選擇設置默認值。但是可以做到的。

在其中我們可以執行以下操作：

const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;

捕獲生命周期事件中的值（至）

react-允許您使用生命周期事件捕獲值。我們可以通過兩種方法來做到這一點。我們可以使用或可以使用在

這是使用進行設置的方法

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation'; // you must import this
export default class Screen2 extends React.Component {
    state = {
      text: 'nothing passed'
    }
  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }
  render() {
    return (
      
        
        Screen 2
        {this.state.text}
      
    )
  }
}

這是在

export default class Screen2 extends React.Component {
  componentDidMount () {
    // we add the listener here
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
  }
  componentWillUmount () {
    // we remove the listener here
    this.willFocusSubscription.remove()
  }
  state = {
    text: 'nothing passed'
  }
  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }
  render() {
    return (
      
        Screen 2
        {this.state.text}
      
    )
  }

}

通過組件傳遞導航

在以上示例中，我們在屏幕之間傳遞了值。有時我們在屏幕上有一個組件，我們可能想從中導航。只要在作為導航器一部分的屏幕中使用組件，我們就可以做到。

如果我們從初始模板開始并構造兩個按鈕。一個將是功能組件，另一個將是React組件。

.js

// this is a functional component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
export const MyButton = ({navigation, value, title}) => {
  return (
     navigation.navigate('Screen2', { value })}>
      
        {title}
      
    
  )
}
const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }
});

.js

// this is a React component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
export default class MyOtherButton extends React.Component {
  render() {
    const { navigation, value, title } = this.props; 
    return (
     navigation.navigate('Screen2', { value })}>
      
        {title}
      
    
    )
  }
}
const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow'
  }
});

無論組件的類型如何，請注意導航是一個道具。我們必須將導航傳遞給組件，否則它將無法正常工作。

.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { MyButton } from './MyButton';        
import MyOtherButton from './MyOtherButton';  

export default class Screen1 extends React.Component {
  render() {
    return (
      
        Screen 1
        
        
      
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

請注意，.js由于它包含在中，因此可以訪問this.props.。我們可以將它作為道具傳遞給我們的組件。只要我們在組件中使用它html頁面之間傳遞數據，就應該能夠使用組件自己的功能進行導航。

零食

這是通過參數的小吃。

這是用于傳遞參數并捕獲生命周期事件的小吃。

這是將導航傳遞到組件的小吃

2> ..：

1)在主屏幕上: -

初始化: -

constructor(props) {
    super(props);
    this.navigate = this.props.navigation.navigate; }

發送:-

this.navigate("DetailScreen", {
            name: "Detail Screen",
            about:"This is Details Screen Page"
          });

2)在細節屏幕上: -

初始化: -

constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
}

回收數據: -

console.log(this.params.name);
console.log(this.params.about);