TabNavigator передает разные параметры с каждого экрана в заголовок StackNavigator

Question

TabNavigator передает разные параметры с каждого экрана в заголовок StackNavigator

1

У меня есть вопрос. Как я могу передать конкретный параметр с каждого экрана в заголовок StackNavigator, чтобы выходить на другие компоненты при достижении экрана.

Я провел некоторое исследование по этому вопросу, но информации, которая может мне помочь, мало. Поэтому я разместил здесь, чтобы найти помощь, надеюсь, что есть кто-то, кто может вести меня. Большое спасибо.

const mainNav = TabNavigator({
  Home: { 
    screen: HomeScreen,
    param:{
      tabval:1
    }
  },
  Live: {
   screen: LiveScreen,
   param:{
      tabval:2
    }
  },
  Radio: {
   screen: RadioScreen,
   param:{
      tabval:3
    }
  },
} );

function DifferentComponents(tabval){
  if(tabval == 1){
    //do something
  }else if(tabval == 2){
    //do something
  }else{
    //do something
  }
}

export const mainStack = StackNavigator({
  Home: { 
    screen: mainNav,
    navigationOptions: {
      header: (
        <View style={styles.topnavscrollview}>
          <View style={{width:300}}>
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
              {this.DifferentComponents(tabval)} <-- Change this when switch to Live tab or others
            </ScrollView>
          </View>
        </View>
      ),
    },
  },
  Content: { screen: ContentScreen },
});

Im Happy 09 окт. 2017, в 05:46

Источник

Теги:

javascript

android

react-native

ios

react-navigation

1 ответ

Ещё вопросы

SherylHohman · Answer 1 · 2018-04-25T23-06-00.000Z

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

class Home extends React.Component {    

  // dynamically set header title when component mounts
  static navigationOptions = (props) => {
    const title = props.myTitleForThisComponent;
    return { title }
  }

  render(){
  // render stuff..
  }
}

Когда вы переходите к компоненту через ссылку StackNavigator, любые реквизиты, которые вы передадите в компонент, будут доступны как this.props.navigation.state.params.

Например, если вы перейдете к своему компоненту через StackNavigator следующим образом:

this.props.navigation.navigate(
    'Home',
     /* below passes into the "Home" component as: this.props.navigation.state.params.title */
     { myCustomTitle: "hello there" }
)}

Затем вы можете создать пользовательский заголовок для компонента Home страница следующим образом:

  static navigationOptions = ({ navigation }) => {
    const { myCustomTitle } = navigation.state.params;
    return { title: '${myCustomTitle} !!'}
  }

Привет !!

Примечание. Когда вы определяете свой StackNavigator, вам не нужно включать параметр navigationOptions.title, так как вы добавляете его динамически, когда компонент монтируется.
Тем не менее, вы можете предоставить общие navigationOptions значение в определении StackNavigator, чтобы обеспечить значения " по умолчанию" для компонентов, которые не добавляют/переписывают их динамически.