如何在React Navigation标头中使用ref

Question

我在React导航的navigationOptions中添加带有按钮（即搜索图标）的搜索栏。现在，我想使用navigate功能发送键入的文本。我不知道如何通过TextInput的引用来获取其本机文本。以下是我到目前为止完成的代码。

static navigationOptions = ({ navigation }) => (
    headerStyle: {
        ...
    },
    headerTitle: (
        <View style={{ width: '100%', height: 75, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 50, backgroundColor: 'white' }}>
            <TextInput style={{ width: '85%', padding: 15 }}
            onSubmitEditing={
                (e) => (e.nativeEvent.text.length > 2) && navigation.navigate('Brands', {text: e.nativeEvent.text})
            } />

            <TouchableOpacity style={{ width: '15%', padding: 15 }}
            onPress={() => navigation.navigate('Brands'/*, {text: HERE I WANT TO GET TEXT FROM REFERENCE}*/)}>
                <Icon type='FontAwesome' name='search'
                style={{ color: 'red', 20, textAlign: 'center' }} />
            </TouchableOpacity>
        </View>
    )
)};

但是navigationOptions是静态的，所以我无法调用this。因此，我该如何使用ref在按下按钮时获取输入文本。

我在React导航的navigationOptions中添加带有按钮（即搜索图标）的搜索栏。现在，我想使用导航功能发送键入的文本。我不知道如何通过...

Answer 1

通过naviagtion prop发送回调到navigationOptions。在componentDidMount中设置回调值