Лучший способ создать прокручиваемую вкладку в середине экрана?

Question

Мобильное приложение Twitter имеет прокручиваемую вкладку в центре экрана, когда вы находитесь в своем профиле.Верхняя половина экрана, отображающая информацию о вашем профиле и т. Д., Не изменяется, когда вы нажимаете на прокручиваемые вкладки в середине экрана: «Твиты и ответы», «Медиа» и т. Д. Мне интересно, как это можно создать?Половина экрана остается прежней, а затем вкладки, которые меняют середину экрана ... В настоящее время я использую вкладки навигации в качестве основной навигации - поэтому на одной из этих вкладок (вкладка профиля) я хочу создать ту же концепцию, что икартинка ..

Answer 1

Поздний ответ, но (для кого-либо еще и для будущего использования) реагирование-навигация использует этот пакет, реакцию-родной-просмотр-вкладок: https://github.com/react-native-community/react-native-tab-view

для своих вкладок.

Вы можете вложить это в экран, как вы хотите (предыдущий ответ касается только навигатора внутри навигатора, а это не то, что вам нужно).

Вот пример (неточно так, как вы хотите, но вы понимаете, что можете, поэтому вместо фонового изображения поменяйте его местами и, соответственно, используйте представление или представление прокрутки для создания этого макета):

https://snack.expo.io/@satya164/collapsible-header-with-tabview

ура:)

РЕДАКТИРОВАТЬ: я только что нашел способ с помощью просто реагировать навигации:

https://snack.expo.io/@mattx/collapsible-header-tabs

проверить это

и другая библиотека: https://github.com/benevbright/react-navigation-collapsible

Answer 2

Я не знаю, поняли ли вы это еще.Но вы можете вкладывать TabNavigator в StackNavigator.Таким образом, вы можете иметь прокручиваемую вкладку.

    class ProfileMenu extends React.Component{
    render() {
     return(
      //whatever you wanted at the top 
      )
     }
    }

    const TabNaviga = createMaterialTopTabNavigator({
      Tweets: {screen: TweetScreen,},
      Replies: {screen: RepliesScreen,},
    })

    const YNavigator = createStackNavigator ({
      Home:{screen: TabNaviga,
        navigationOptions: ({navigation}) => ({
          header: <ProfileMenu navigation= {navigation} />,
        })
      }
    })
export default YNavigator