React Native Navigator

Question

Làm cách nào để chuyển dữ liệu từ sceneA sang sceneB với Navigator trong React Native?

Tôi đang sử dụng này để đi đến sceneB:

this.props.navigator.push({ 
    id: "MainPage", 
    name: 'mainPage' 
}); 

Answer 1

Bạn cần phải thiết lập thuộc tính trên navigator passProps. Có một vài ví dụ gần đây về tràn ngăn xếp, cụ thể là here và here.

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
    return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route }); 
    }} /> 

hoặc

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
     <route.component {...route.passProps} navigator={navigator} route={route} /> 
    } 
    } 
/> 

Nếu bạn đang tìm kiếm cơ bản nhất của các thiết lập chỉ để hiểu các chức năng, tôi đã thiết lập một dự án here mà bạn có thể tham khảo, và dán đoạn code dưới đây.

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    Image, 
    TouchableHighlight, TouchableOpacity 
} = React; 

class Two extends React.Component { 
    render(){ 
    return(
     <View style={{marginTop:100}}> 
      <Text style={{fontSize:20}}>Hello From second component</Text> 
      <Text>id: {this.props.id}</Text> 
      <Text>name: {this.props.name}</Text> 
      <Text>name: {this.props.myVar}</Text> 
     </View> 
    ) 
    } 
} 

class Main extends React.Component { 
    gotoNext(myVar) { 
    this.props.navigator.push({ 
     component: Two, 
     passProps: { 
     id: 'page_user_infos', 
     name: 'page_user_infos', 
     myVar: myVar, 
     } 
    }) 
    } 

    render() { 
    return(
     <View style={{flex: 4, flexDirection: 'column', marginTop:100}}> 
     <TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={() => this.gotoNext('This is a property that is being passed') }> 
      <Text style={{textAlign:'center'}}>Go to next page</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

class App extends React.Component { 
    render() { 

    return (
     <Navigator 
       style={{flex:1}} 
      initialRoute={{name: 'Main', component: Main, index: 0}} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route }); 
         } 
       }} 
      navigationBar={ 
      <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} /> 
     } /> 
); 
} 
} 


var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight style={{marginTop: 10}} onPress={() => { 
      if (index > 0) { 
       navigator.pop(); 
      } 
     }}> 
     <Text>Back</Text> 
    </TouchableHighlight> 
)} else { 
return null} 
}, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return null 
    } 
}; 


var styles = StyleSheet.create({ 

}); 

AppRegistry.registerComponent('App',() => App); 

Answer 2

Đôi khi đèo prop không hoạt động (ít nhất là đối với tôi) Vì vậy, những gì tôi làm là tôi vượt qua nó trong đối tượng đường riêng của mình

nav.push({ 
     id: 'MainPage', 
     name: 'LALA', 
     token: tok 
     }); 

như vậy để truy cập nó trong cảnh tiếp theo tôi sử dụng

var token = this.props.navigator.navigationContext.currentRoute.token; 

mặc dù loại một "truy cập" phức tạp nhưng nó là kẻ ngốc bằng chứng qua đạo cụ có thể làm việc hoặc có thể không còn theo cách này bạn có thể vượt qua các thuộc tính trong đối tượng tuyến đường như vậy, bản thân giúp bạn tiết kiệm từ những rắc rối của việc gửi tôi theo một cách khác.

Điều này có thể không đúng cách nhưng tôi thấy nó thuận tiện hơn một chút.

Answer 3

Tôi sẽ thiết lập công cụ điều hướng của bạn là this example. Về cơ bản, đặt hoa tiêu trong cảnh chỉ mục của bạn và có tất cả các thành phần cần thiết được nhập vào đó. Sau đó, định nghĩa hàm renderScene() để xử lý tất cả các tuyến dựa trên tên (hoặc id, giống như bạn đã làm). Tôi sẽ không sử dụng đối tượng thành phần như chính nó được truyền từ lời gọi đến phương thức đẩy navigator bởi vì nếu bạn làm điều đó, bạn sẽ phải import thành phần trong khung nhìn cụ thể đó. Tôi đã từng làm điều đó và gặp nhiều vấn đề, vì vậy tôi chỉ cảnh báo bạn nếu bạn gặp phải bất kỳ vấn đề nào, hãy xem xét cách tiếp cận này.

renderScene(route, navigator) { 
 

 
    if(route.name == 'root') { 
 
     return <Root navigator={navigator} /> 
 
    } 
 
    if(route.name == 'register') { 
 
     return <Register navigator={navigator} /> 
 
    } 
 
    if(route.name == 'login') { 
 
     return <Login navigator={navigator} /> 
 
    } 
 
    if(route.name == 'home') { 
 
     return <Home navigator={navigator} {...route.passProps} /> 
 
    } 
 
    if(route.name == 'update') { 
 
     return <Update navigator={navigator} {...route.passProps} /> 
 
    } 
 

 
    }

Answer 4

Nếu bạn đang sử dụng react-native-navigation, chỉ cần thêm passProps-params bạn đối tượng, theo documentation.

Eg .:

this.props.navigator.push({ 
    screen: 'example.Screen', 
    title: 'Screen Title', 
    passProps: { 
    id: 'MainPage', 
    name: 'mainPage' 
    } 
}) 

Answer 5

Bạn cũng có thể vượt qua các thông số để sceneA để sceneB sử dụng theo cách sau. Giả sử rằng _handlePressOnClick() được viết trên một số nút bấm trong màn hình SceneA.

_handlePressOnClick(){ //this can be anything 
this.props.navigator.push({ 
    name: "sceneB", //this is the name which you have defined in _renderScene 
    otherData: { 
     dataA: "data1" 
    } 
}) 
} 

Sau đó định nghĩa dữ liệu trong _renderScene nơi bạn đã thực hiện tiêu của bạn như cách này

_renderScene(route, navigator) {   
    switch(route.name) { 
     case "sceneA": 
      return (
       <sceneA navigator={navigator} /> 
      ); 
     break; 
     case "sceneB": 
      return (
       <sceneB navigator={navigator} otherData={route.otherData}/> 
      ); 
     break; 
    } 

Đừng quên để nhập khẩu quan điểm của bạn file như thế này

import sceneA from './sceneA'; 
import sceneB from './sceneB'; 

Bây giờ trong sceneB tệp bạn có thể truy cập vàoData khác của mình theo cách

var {dataA} = this.props.otherData; 

or 

constructor(props){ 
    super(props); 
    this.state={ 
    otherData: this.props.otherData 
    } 
} 

sau đó trong phương thức render() của bạn, bạn có thể truy cập các dữ liệu khác bằng cách sử dụng trạng thái.

<Text>{this.state.otherData.dataA}</Text> 

Bạn cũng có thể sử dụng để duy trì trạng thái mức toàn cầu bằng cách sử dụng Redux có thể truy cập thông qua hành động và đạo cụ tự động.

Answer 6

1. Khi chuyển dữ liệu từ cảnh A sang cảnh B, bạn phải chỉ định trong thẻ điều hướng mà bạn cũng đang chuyển dữ liệu với tuyến đường. ví dụ:

if(route.name == 'home') { 
     return <Home navigator={navigator} data={route.data} /> 
    } 

gửi dữ liệu từ cảnh A ví dụ: this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

trong cảnh B truy cập dữ liệu như thế này ví dụ: this.props.data.name và bạn nhận dữ liệu từ cảnh A đến cảnh B