1, requirement analysis

native development, custom View is a common occurrence. Often, system controls can not meet the needs of reality. The design of a variety of products requires us to make a different View. There are many blogs on the content of custom View. This blog will share with you how to customize components in React Native to achieve the effect of drawer menu control. The importance of sharing the function in App must be self-evident, so how does RN achieve this effect? Only the implementation of IOS

React Native system in the library, the ActionSheetIOS. display of the control has two components:

(1) showActionSheetWithOptions

(2) showShareActionSheetWithOptions

is the first to display a ActionSheet pop-up box on iOS devices. The second implementation is to display a shared pop-up box on the iOS device. The official explanation is as follows: use

"text-align: center" > src=

"on the

IOS device has been provided, then we need to fit Android. In native development, custom View is also a basic process:

(1) custom control classes, inheriting View or system controls.



custom attribute for custom attributes, and initialize a series of tools

(4) override the onMeasure method,

measurements were performed on

controls (5) if it is a custom layout, also need to override the onLayout in the React Native custom components and custom layout similar to the basic idea of the original

. So in accordance with this process, we can implement it step by step.


1 and

to realize the function of custom components, the need to implement the Component

 export default class AndroidActionSheet extends Component 


 / / 1. custom attributes declared attribute static propTypes= {title: React.PropTypes.string / / content: / / React.PropTypes.object, title, show: React.PropTypes.func, hide: React.PropTypes.func / / display / hide. 
 constructor (props)} {super (props); this.translateY = 150; this.state = {visible: false, sheetAnim: new Animated.Value (this.translateY) this.cancel = this.cancel.bind (this)}}; 

3, The realization of the basic

 / * * * Modal layout of the outer layer, ScrollView layer (render) content * {const} sheetAnim {visible = this.state; return (< Modal visible={visible transparent={true}}} animationType= "None" onRequestClose={this.cancel > < style={styles.wrapper; View;}> < TouchableOpacity style={styles.overlay} onPress={this.cancel}> < < Animated.View; /TouchableOpacity> style={[styles.bd, {height: this.translateY, transform: translateY: sheetAnim}]}]}> [{; this._renderTitle (<) {ScrollView}}; horizontal={true showsHorizontal ScrollIndicator={false}> {this._renderContainer (<);}; /ScrollView> < /Animated.View> < /View> < /Modal> 

)} can be seen above we define the basic layout, use the _renderTitle layout () method to render the title section, the content area is ScrollView, and the horizontal rolling, namely when the menu more than a screen width, can choose the horizontal sliding. In the call to the renderContainer method to render the menu:

 / * * * * _renderTitle title () {const} titleStyle {title = this.props; if (! Title) {return null} / / determine the incoming is not a React Element, to prevent the render time error if (React.isValidElement (title)) {return (< View; style={styles.title}> {title}< /View> return (<)}; Text style={[styles.titleText titleStyle]}> {title}< /Text>} / * * *) _renderContainer (*) content layout {const {content} = (this.props; return < View style={styles.container}>} < {content}; /View> 

) when we need click Modal to close when Also, need to handle off operation, Modal does not provide external closure for us, so we need to achieve alone, from the layout code we see TouchableOpacity as a mask layer, and add a single event, call cancel to


 Modal / * * * control click the close button to turn off the back, Android / cancel (this.hide) {(


);} custom method, external call

in the external control we need to display and hide, so it is necessary to open and close the display method:

 / * * * * show display () {this.setState ({visible: true}) Animated.timing (this.state.sheetAnim, toValue: {duration: 250} 0 (.Start) 
);} / * * * * hide (this.setSt) {hidden Ate ({visible: false} Animated.timing (this.state.sheetAnim, toValue:) {this.translateY, duration:}); (150).Start 


}, < ActionSheet ref='sheet'title=' (content={this._renderContent) /> share '}; 

so far, we have completed the custom component. Overall, the basic principle is very simple, the main use of the custom attributes, transmission, animation, can be easily realized. The focus of this blog is not to let you know how to write this effect, but to let you know how to achieve it step by step when we encounter a custom implementation. All the contents of

is this, want to help everyone to learn, I hope you will support a script.

This paper fixed link:http://www.script-home.com/an-example-of-the-bottom-drawer-menu-of-the-react-native-custom-control.html | Script Home | +Copy Link

Article reprint please specify:An example of the bottom drawer menu of the React Native custom control | Script Home

You may also be interested in these articles!