2016-10-27 16 views
5

Tôi có một thiết lập Router với cảnh 2 tab:phản ứng-native-router-flux: Làm thế nào để ngăn chặn ngăn xếp lịch sử tab cảnh được đặt lại khi thay đổi giữa các tab?

  • Tab 1: có 2 cảnh điều hướng (màn hình tĩnh);
    • Screen A: có một nút để điều hướng đến Screen B;
    • Màn hình B: chỉ cần có văn bản;
  • Tab 2: chỉ có 1 màn hình tĩnh.
    • Màn hình C: chỉ cần có văn bản;

Mã như sau.

app.js:

import React from 'react'; 
import { Router, Scene } from 'react-native-router-flux'; 
import Tab from '../tab'; 
import ScreenA from './a'; 
import ScreenB from './b'; 
import ScreenC from './c'; 


export default class App extends React.Component { 
    render(){ 
    return (
     <Router> 
     <Scene key="root"> 
      <Scene key="tabbar" tabs={true}> 

      <Scene key="tab1" title="Tab 1" icon={Tab}> 
       <Scene key="a" title="Screen A" component={ScreenA} /> 
       <Scene key="b" title="Screen B" component={ScreenB} /> 
      </Scene> 

      <Scene key="tab2" title="Tab 2" icon={Tab}> 
       <Scene key="c" title="Screen C" component={ScreenC} /> 
      </Scene> 

      </Scene> 
     </Scene> 
     </Router> 
    ); 
    } 
} 

Màn hình là khá đơn giản quá.

a.js:

export default class ScreenA extends React.Component { 
    render(){ 
    return (
     <View> 
     <Text>This is Screen A</Text> 
     <TouchableHighlight onPress={() => Actions.b()}> 
      <Text>Go to Screen B</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

b.js:

export default class ScreenB extends React.Component { 
    render(){ 
    return (
     <View> 
     <Text>This is Screen B</Text> 
     </View> 
    ); 
    } 
} 

c.js:

export default class ScreenC extends React.Component { 
    render(){ 
    return (
     <View> 
     <Text>This is Screen C</Text> 
     </View> 
    ); 
    } 
} 

Sử dụng trường hợp:

  • Ứng dụng hiển thị Màn hình A (trong Tab 1);
  • Nhấp vào nút trong Màn hình A: ứng dụng điều hướng đến Màn hình B (vẫn còn trong Tab 1);
  • Nhấp vào Tab 2: ứng dụng điều hướng đến Màn hình C (trong Tab 2).
  • Nhấp vào Tab 1: ứng dụng điều hướng đến Màn hình A (trong Tab 1) và NOT tới màn hình B như mong đợi.

react-native-router-flux không giữ lại ngăn xếp lịch sử của tab khi chúng tôi quay lại chúng. Hay tôi đang làm gì sai ở đây?

gói phiên bản:

  • phản ứng v15.3.2
  • phản ứng bản địa v0.34.1
  • phản ứng bản địa-router-flux v3.36.0

Trả lời

3

Hóa ra đây là một lỗi trong phản ứng bản địa-router-flux gói, và nó đã được sửa trong số này pull request.

+1

Làm cách nào để ứng dụng điều hướng đến màn hình A thay vì màn hình B khi nhấp vào liên kết đến tab 1 từ bên trong tab 2? –

Các vấn đề liên quan