0

我在 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在其中使用关键字。我也不能state在 navigationOptions 中使用。那么我如何使用ref在按钮按下时获取输入文本。

编辑

我想从中获得TextInput价值ref

<TextInput ref={(ref) => { this.input = ref; }} />
// OR
<TextInput ref='input' />

这样我就可以从中获得它的价值

this.input._lastNativeText
// OR
this.refs['input']._lastNativeText

但我不能使用this关键字或stateinnavigationOptions因为它是静态的。如何在单击按钮时访问 TextInput 的值？

4

2 回答 2

0

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

  componentDidMount=()=> {
        this.props.navigation.setParams({
          onSubmitEditing: this.onSubmitEditing,
        });
    }

    onSubmitEditing=(event)=>{
        console.log(event);
        //this is avaialbel here  
      }

从 naviagttion 参数获取 SubmitEdit 函数

 static navigationOptions = ({ navigation = this.props.navigation }) => {
    const onSubmitEditing = navigation.state.params.onSubmitEditing;
    return {
      headerTitle: (
        <View style={{ width: '100%', height: 75, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 50, backgroundColor: 'white' }}>
          <TextInput style={{ width: '85%', padding: 15 }}
            onSubmitEditing={onSubmitEditing} />

          <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', size: 20, textAlign: 'center' }} />
          </TouchableOpacity>
        </View>
      )
    }
  };
于 2019-11-27T10:54:56.857 回答
0

以防万一有人需要这个

   componentDidMount(){
    ---
    this.props.navigation.setParams({
          setMenuRef: this.setMenuRef.bind(this),
        });
    ---
    }
    
    _menu = null;

    setMenuRef = ref => {
        this._menu = ref;
      };
    
    onSortClick() {
        this._menu.show();
      }
    
    static navigationOptions = ({navigation}){
    
    headerRight:(
    ---
    ref={navigation.state.params && navigation.state.params.setMenuRef}
    ---
    )
    
    }
于 2020-08-19T21:14:10.730 回答