Question

我使用react-navigation并具有如下所示的自定义导航栏：

export default class Posts extends Component {

  static navigationOptions = {
    headerTitle: <Title />,
    headerRight: <Icon icon={require('../../assets/svg/search.svg')} screenToGo="Search"/>,
    headerLeft: <Icon icon={require('../../assets/svg/person-outline.svg')} screenToGo="Profile"/>,
  };
...
}

在这里，title组件只是一个TouchableOpacity，应该触发一个我想向上滑动并占据屏幕一半的视图组件。您能否建议如何实现该功能？

Answer 1

您可以使用react-native-popup-menu

安装

npm install react-native-popup-menu --save

如果您使用的是旧版RN，请查看我们的兼容性表。基本用法

将应用程序包装在MenuProvider内，然后在需要的地方使用菜单组件即可。您可以在下面找到一个简单的示例。

有关更详细的文档，请检查API。

// your entry point
import { MenuProvider } from 'react-native-popup-menu';

export const App = () => (
  <MenuProvider>
    <YourApp />
  </MenuProvider>
);

// somewhere in your app
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';

export const YourComponent = () => (
  <View>
    <Text>Hello world!</Text>
    <Menu>
      <MenuTrigger text='Select action' />
      <MenuOptions>
        <MenuOption onSelect={() => alert(`Save`)} text='Save' />
        <MenuOption onSelect={() => alert(`Delete`)} >
          <Text style={{color: 'red'}}>Delete</Text>
        </MenuOption>
        <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
      </MenuOptions>
    </Menu>
  </View>
);

希望这会有所帮助。

你很好走！！

单击顶部导航栏上的标题时如何向上滑动视图

1 个答案: