Question

不确定为什么这不起作用 - 我希望在NavigationBar-Title中有一个Textinput，在Button中清除输入“RightButton”。但是代码应该解释一下：我有一个简单的导航器（这里简化）：

      <Navigator
                ref="navigator"
                navigationBar={
                   <Navigator.NavigationBar
                     style={styles.nav}
                     routeMapper={ NavigationBarRouteMapper } />
                 } />

在标题中使用TextInput（用于搜索），以及用于清除输入的图标。：

var NavigationBarRouteMapper = {
  RightButton(route, navigator, index, navState) {
   if(route.name=='Search') {
    return (
     <TouchableHighlight
        underlayColor="transparent"
        onPress={() => this.refs.searchTextInput.clear() }>
      <Icon
          name={"clear"}
          size={24}
          color="#777777"
          style={styles.rightNavButton} />
     </TouchableHighlight>
    );
 }

 Title(route, navigator, index, navState) {
  if(route.name=='QuestionList' || route.name=='Search'){
   return (
    <TextInput
      ref="searchTextInput"
      style={ styles.searchBar}
      autoFocus = {(route.name!='Search')? false : true}
      onFocus={
          (route.name!= 'Search')?
              ( index<2?
                () => navigator.push({name: 'Search', enableBackButton: true})
              :
                ()=> navigator.pop()
              )
          :
              null }
      onChangeText={(text) => {route.sendTextToModule(text)}}
      placeholder='Ask...'/>);
    }
}

错误是：undefined不是对象（评估'_this2.refs.searchTextInput'）。好像它不在范围内，但是是啊..从来没有正确地学习JS :)

Answer 1

使用textinput值的状态将使您摆脱这种复杂性。添加名为xTextInputValue =＆＃39;的状态＆＃39;在构造函数中。

onChangeText = {（text）=＆gt; {导航器 .props.setTextValueX（text）}} // TextInput oncChangeText
titleText = {this.state.xTextInputValue} //添加此道具您的导航器组件
setTextValueX =（（val）=＆gt; this.setState（xTextInputValue：val）// add 导航器组件

是的。 onChangeText将调用navigator的setTextValueX函数，此函数将刷新值，同时titleText值将在同一渲染过程中刷新。

//您的新导航器组件

  <Navigator
             ref="navigator"
             titleText= {this.state.xTextInputValue}
             setTextValueX = ( (val) => this.setState(xTextInputValue:val)
             navigationBar={
              <Navigator.NavigationBar
                style={styles.nav}
                routeMapper={ NavigationBarRouteMapper } />
           } />

RN：Navigationbar - 如何从Rightbutton更改标题

1 个答案: