在页眉上反应本机搜索功能

时间:2019-02-26 10:36:55

标签: reactjs react-native

class DashboardScreen extends Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <View style={{ flex: 1 }}>
        <Header>
          <Left style={{ flex: 1 }}>
            <Icon name="md-menu" size={30} onPress={() => this.props.navigation.openDrawer()} />
          </Left>
          <Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Image style={{ width: 80, height: 45, }} source={require('./resources/hr-pro-logo.png')} />
          </Body>
          <Right style={{ flex: 1 }}>
            <Icon name="md-search" size={30} onPress={() => alert('hi there')} />
          </Right>
        </Header>
        <View style={styles.container}>
          <Text>Welcome to Dashboard</Text>
        </View>
      </View>
    );
  }
}

上图是一个简单的屏幕,带有从“本地基础”模块导入的标题。用于菜单和搜索的图标取自“ react-native-vector-icons”。单击菜单图标会打开我的抽屉式导航器,并且我想在单击搜索图标时实现搜索功能(当前有警报)。

我还没有在网上看到很多有用的功能信息,这些功能说明了标题具有多个操作(打开菜单,搜索等)。

有人可以指出我正确的方向吗?

0 个答案:

没有答案