Question

我正在开发本机上的移动应用程序。我是新来反应本地人，所以我被困在1点。

问题是我有一个导航文件，其中堆栈导航器包装在选项卡导航器中。

我有一个带有抽屉菜单打开按钮和搜索栏的自定义标题。

我有一个用于搜索视图的单独组件。它以搜索栏为基础在主页上显示和隐藏。

现在，当我单击搜索栏时，在我主页上的问题就显示在此处的搜索组件中，我需要的是在我的搜索组件中获取该搜索栏的值。

可能有点令人困惑，请随时问我任何事情。

我还要攻击图像和我的代码。

我的导航js看起来像这样。

import Search from '../Search/search';

StackNavigator

const SearchBarI = (props) => {
return (
    (<View style={searchSection}>
        <TextInput style={searchBarInput} placeholder="Search" ref={input => { this.searchInput = input }}
            onChangeText={(text) => this.onChangeText(text)} />
        <Icon style={searchIcon} name="ios-search" size={20} color="#000" />
        <TouchableOpacity style={closeIconBtn} onPress={() => ClearText()}>
            <Icon style={closeIcon} name="ios-close" size={20} color="#000" />
        </TouchableOpacity>

    </View>)
)
}
const feedStackNavigation = createStackNavigator({
feed: {
    screen: Feed,
    navigationOptions: ({ navigation }) => {
        const { params = {} } = navigation.state;
        return {

            headerTitle: <SearchBarI/>,
            headerStyle: headerStyle,
            headerRight: (
                <TouchableOpacity style={{ paddingRight: 10 }} onPress={(params.ClearSearch)}>
                    <Text style={{ color: '#fff' }}>Cancel</Text>
                </TouchableOpacity>
            ),

            headerLeft: <HeaderLeft navigation={navigation} />,


        }
    }
},
})

And include in tab navigator and export it.

const appTabNavigation = createBottomTabNavigator({
Feed: feedStackNavigation,
})


export default appTabNavigation;

在搜索栏中显示onChangeText时我需要什么，我想在搜索组件中传递该值，并需要在那里更改状态和其他功能。

主页截图。

点击搜索栏屏幕截图后。

在搜索栏中键入内容后，我收到一个警报，该警报是其中的功能导航文件。

希望它会给您清晰的外观。预先感谢。

Answer 1

我不知道它是否行得通，但是我之前使用了某种方法，我需要在同一页面的两个组件之间进行互通，这是一场噩梦。现在我不使用反应导航的标题，因为我有一个自定义标题7u7。但是，您可以尝试一下。

首先。不要在堆栈的navigationOptions中定义headerTitle。而是在屏幕Feed中定义它。

因此，根据示例，您需要在屏幕Feed中添加静态导航选项，并向标题标题发送回调作为道具

export default class App extends React.Component {
  constructor() {....}


  static navigationOptions = { //here is the navoptions
  headerTitle: <SearchBarI callback={this.handlecallback}/>  //here is the callback that we are sending
  };   


  handlecallback =(props)=>{ //here is the handler , it NEEDS to be a fat arrow function [that's how mafia works]
      alert(props)
       //do whatever you want in that page
  }

  render() {
    return (

      <View>
      </View>

    );
  }
}

以及在搜索栏中的文本输入

<TextInput style={searchBarInput} placeholder="Search" ref={input => { this.searchInput = input }}
            onChangeText={(text) => props.callback(text)} />

将TextInput值传递到导入的组件

1 个答案: