Question

我试图在Component.navigationOptions中使用我创建的Context，但无法从组件外部访问它

我已经尝试过“ props.navigation.setParams / props.navigation.getParams，但是它们总是冻结我的屏幕，而且效果不佳

const AddNoteScreen = props => {
    const {addNote} = useContext(Context);
    const [title, newTitle] = useState('');
    const [description, newDescription] = useState('');

    props.navigation.setParams(addNote);


    return <>
        <Spacer/>
        <Input label='Note Title' value={title} onChangeText={newTitle} />
        <Spacer/>
        <Spacer/>
        <Input label='Note Detail' value={description} onChangeText={newDescription} multiline={true} numberOfLines={9} />
    </>
}

AddNoteScreen.navigationOptions = ({navigation}) => {
    return {
        title: "Add your note",
        headerTintColor: navigation.getParam('HeaderTintColor', '#fff'),
        headerStyle: {
            backgroundColor: 'rgb(254, 56, 56)',
            borderBottomEndRadius : 18,
            borderBottomStartRadius : 18,
        },
        headerRight: (
            <TouchableOpacity onPress={() => 
             navigation.getParam(addNote(newTitle, newDescription))}>
                <Feather style={styles.plus} name="plus" size={25}/>
            </TouchableOpacity>
        ),
    }
};

我希望能够像这样在NavigationOptions中使用上下文，但是就像我说的那样，发生了一些奇怪的事情，但没有任何效果。

Answer 1

要访问静态navOptions内部的addNote()，应按以下方式调用它：navigation.state.params.addNote()，并将AddNoteScreen的状态保留在navOptions之外。

const AddNoteScreen = props => {
  const { addNote } = useContext(Context);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const callNoteFromNav = () => {
    addNote(newTitle, newDescription);
  };

  props.navigation.setParams(callNoteFromNav);

  return (
    <>
      <Spacer />
      <Input label="Note Title" value={title} onChangeText={setTitle} />
      <Spacer />
      <Spacer />
      <Input
        label="Note Detail"
        value={description}
        onChangeText={setDescription}
        multiline={true}
        numberOfLines={9}
      />
    </>
  );
};

AddNoteScreen.navigationOptions = ({ navigation }) => {
  return {
    title: 'Add your note',
    headerTintColor: navigation.getParam('HeaderTintColor', '#fff'),
    headerStyle: {
      backgroundColor: 'rgb(254, 56, 56)',
      borderBottomEndRadius: 18,
      borderBottomStartRadius: 18
    },
    headerRight: (
      <TouchableOpacity
        onPress={() => navigation.state.params.callNoteFromNav()}
      >
        <Feather style={styles.plus} name="plus" size={25} />
      </TouchableOpacity>
    )
  };
};

您不应尝试访问navOptions内部的状态，因为它是静态的。但是，这将是将来版本中的功能。我可以建议您检查React Navigation Next。 React Navigation的人员用更多的React类型的配置header的方式代替了静态选项。

编码愉快！

在react-native中在navigationOptions中使用上下文

1 个答案: