Как обновить заголовок навигации с экрана?

react-native version 0.62

Я создаю приложение для викторины, и на каждый новый вопрос (новый экран викторины, QuestionScreen.js) я хочу обновить метку на панели навигации, которая объявлена ​​в App.js В App.js, проблема здесь в том, что я не знаю, как передать состояние от questionIndex до HomeScreen или QuestionScreen, обычно я думал, что это будет использовать такие реквизиты, как <Question questionIndex={questionIndex}>. Я пытался передать их в options, но, похоже, это не сработало ...

const App = () => {
  const [questionIndex, setQuestionIndex] = useState(0);

  return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName='Home'
      > 
      <Stack.Screen 
      name='Home'
      component={HomeScreen}
      options={{
        title:''
    }}
      />
      <Stack.Screen
      name='QuestionScreen'
      component={QuestionScreen} 
      options={({ navigation }) => ({
        headerBackTitleVisible: false,
          headerRight: ()=>(<HeaderRight pageIndex={questionIndex}/>),
           headerRightContainerStyle: {
                        alignItems: "flex-end",
                        paddingRight: 25
            },
      })}
    />


function HeaderRight(props) {
  return (
      <Text>{props.pageIndex}/{questions.length-1}</Text>
    );
}
const HomeScreen = ({ navigation }) => {

  return (
    <View style={styles.container} >
    <ScrollView>

    <TouchableOpacity onPress={()=> 
      //here I'm unable to retrieve the questionIndex props.
      //tried navigation.getParams("questionIndex") or route.params
      
      navigation.navigate('QuestionScreen', {
          pageIndex: 0
      })
    }>

In QuestionScreen.js

function QuestionScreen({route, navigation, options}) {

    const { pageIndex } = route.params;

[Полный код здесь, на github] https://github.com/liaoxsong/expofirst Я новичок чтобы реагировать-нативно, и я пришел из собственной мобильной разработки, этот API-интерфейс Stack.Navigator выглядит странно, не могу ли я просто управлять заголовком навигации из самого компонента экрана? Так было бы проще.


react-native react-native-navigation
person miracle-doh    schedule 15.09.2020    source источник
comment
stackoverflow.com/a/63364112/2382964 .... изучите это   -  person Tushar Pandey    schedule 15.09.2020

Ответы (2)


arrow_upward
0
arrow_downward

трудно настроить заголовок по умолчанию, заданный с помощью навигации по реакции, вы можете отключить заголовок и создать свой собственный заголовок.

отключите заголовок, указав свойство headerMode = {none} в createStackNavigator, и разместите свой собственный заголовок сверху,

чтобы отключить документы заголовков: https://reactnavigation.org/docs/stack-navigator/#headermode

person HS NANDEESH GOWDA    schedule 15.09.2020
comment
где именно я должен поместить этот _1 _? .. и в идеале я хочу, чтобы настраиваемый заголовок оставался фиксированным при переходе одного экрана к следующему, а этот настраиваемый заголовок - просто еще одно представление, правильно ... поэтому он будет анимирован - person miracle-doh; 15.09.2020
comment
Чтобы отключить заголовок в навигаторе стека, сделайте следующее <Stack.Navigator> <Stack.Screen name="Home" headerMode={'none'} component={Home} /> </Stack.Navigator>. И у вас может быть собственный заголовок, подобный этому <View style={Style.navigation}> <View style={Style.navLeft}><BackButton/></View><View style={Style.navMiddle}><Title/></View><View style={Style.navRight}><ICon/></View></View> - person HS NANDEESH GOWDA; 15.09.2020

arrow_upward
0
arrow_downward

вы должны использовать контекст или сокращение, пример контекста:

страница-context.js

export const PageContext= React.createContext();

app.js

const App = () => {
const [questionIndex, setQuestionIndex] = useState(0);

return(
    <PageContext.Provider value={[questionIndex, setQuestionIndex]}>
       <NavigationContainer> // your routes
    </PageContext.Provider>)

QuestionScreen.js

https://reactnavigation.org/docs/header-buttons/

function QuestionScreen({route, navigation, options}) {
    const [questionIndex] = useContext(PageContext);
     React.useLayoutEffect(() => {
        navigation.setOptions({
          headerRight: () => (
            <HeaderRight pageIndex={questionIndex}/>
          ),
        });
      }, [navigation, questionIndex]);
}

использование может использовать setQuestionIndex для изменения questionIndex на каждом экране, который вы хотите

person Zahra Mirali    schedule 15.09.2020