Làm cách nào để tôi thực hiện nút TabNavigator đẩy màn hình phương thức bằng Điều hướng phản ứng

Question

Sử dụng thanh điều hướng tab Điều hướng phản ứng https://reactnavigation.org/docs/navigators/tab làm cách nào để thực hiện một trong các nút tab đẩy màn hình lên làm phương thức toàn màn hình? Tôi thấy trình điều hướng ngăn xếp có tùy chọn mode=modal. làm cách nào để sử dụng chế độ đó khi nhấp vào nút tab TakePhoto? Nhấp vào nó hiện vẫn hiển thị thanh tab ở phía dưới.

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal? 
    }, 
}); 

Answer 1

Thực ra, không có hỗ trợ trong react-navigation để thay đổi cách trình bày khi đang bay từ default đến modal (xem cuộc thảo luận về số here) này. Tôi chạy vào cùng một vấn đề và giải quyết nó bằng cách sử dụng một rất đỉnh StackNavigator với headerMode thiết lập để none và mode thiết lập để modal:

const MainTabNavigator = TabNavigator(
    { 
     Tab1Home: { screen: Tab1Screen }, 
     Tab2Home: { screen: Tab2Screen } 
    } 
); 

const LoginRegisterStackNavigator = StackNavigator({ 
    Login: { screen: LoginScreen } 
}); 

const ModalStackNavigator = StackNavigator({ 
    MainTabNavigator:   { screen: MainTabNavigator   }, 
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator } 
}, { 
    headerMode: 'none', 
    mode:  'modal' 
}); 

này cho phép tôi làm như sau (sử dụng Redux) trong Tab1Screen và Tab2Screen để mang lại lên quan điểm phương thức từ bất cứ nơi nào tôi muốn:

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

Answer 2

Một cách để làm cho các thanh tab ra đi là để ẩn TabBar với visible: false:

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, 
    navigationOptions: { 
     tabBar: { 
     visible: false, 
     }, 
    }, 
    }, 
}); 

Tuy nhiên, đó dường như không gây ra bất kỳ chuyển đổi sang toàn màn hình, mà tôi đoán là mong muốn?

Tùy chọn khác có thể là để bọc PhotoPickerScreen bên trong StackNavigator mới và đặt trình điều hướng đó thành chế độ = 'phương thức'.

Bạn có thể phải kích hoạt điều hướng với phương thức từ onPress trên TabItem bằng cách nào đó (ví dụ. navigation.navigate('TakePhoto').)

Lưu ý, tôi đang cố gắng để quấn quanh đầu tôi cách tốt nhất để cơ cấu chuyển hướng bản thân mình, vì vậy ...

Tùy chọn thứ ba, triển khai StackNavigator làm cha mẹ, sau đó thêm MyApp TabNavigator làm tuyến đường đầu tiên bên trong nó, có thể là giải pháp linh hoạt nhất. Sau đó, màn hình TakePhoto sẽ ở cùng mức với TabNavigator, cho phép bạn định tuyến đến bất cứ đâu.

Quan tâm để nghe những gì bạn nghĩ ra!

Answer 3

Documents là chắp vá ở một số khu vực, nhưng ở đây nó là:

export default class HomeScene extends Component { 

     static navigationOptions = { 
     title: 'foo', 
     header:{ 
        visible: true 
       } 
     } 
     .... 
     } 

Answer 4

Không chắc chắn nếu điều này vẫn còn có liên quan cho bạn, nhưng tôi đã quản lý để tìm ra đi để đạt được điều này.

Vì vậy, tôi đã quản lý để làm cho nó hoạt động bằng cách sử dụng tabBarComponent bên trong tabNavigatorConifg, bạn có thể ngăn điều hướng tab điều hướng tùy thuộc vào chỉ mục.

tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
     <TabBarBottom 
      {...props} 
      jumpToIndex={index => { 
       if (index === 2) { 
        navigation.navigate('camera') 
       } 
       else { 
        jumpToIndex(index) 
       } 
      }} 
     /> 

    ) 

Một khi bạn đã làm điều này, phương pháp của tôi hiển thị các modally xem trên đầu trang của các quan điểm tab đã đặt tabnavigator bên trong một stacknavigatior và sau đó chỉ cần điều hướng đến một màn hình mới bên trong stacknavigator.