React Native: reactnative

React Native: reactnative

I. Requirement Analysis

In Native Development, custom View is a common phenomenon. Generally, system controls cannot meet actual needs. Different product designs require different views. There are already many blog posts about custom View content on the Internet. This blog will share with you how to customize components in React Native to implement the drawer menu control effect. The importance of the sharing Function in the App must be self-evident. How can this effect be achieved in RN?

The React Native System Library only provides IOS implementation, that is, ActionSheetIOS. There are two ways to display the control:

(1) showactionsheetwitexceptions

(2) showdeskactionsheetwithoptions

The first is to display an ActionSheet pop-up box on the iOS device. The second method is to display a share pop-up box on the iOS device. The following is an official image description:

The implementation system on IOS devices has been provided. Next we need to adapt to Android. In Native Development, custom View also has the basic process:

(1) custom control class, inheriting View or system control.

(2) Custom Attributes

(3) Get custom attributes and initialize a series of tool classes

(4) override the onMeasure method to measure the control.

(5) For custom layout, you also need to rewrite onLayout for layout.

The idea of customizing components in React Native is similar to that of Native custom components. So follow this process to implement it step by step.

Ii. function implementation

1. Customize components to implement Component

export default class AndroidActionSheet extends Component 

2. Custom Attributes

// 1. declare the required property static propTypes = {title: React. propTypes. string, // Title content: React. propTypes. object, // content show: React. propTypes. func, // display hide: React. propTypes. func, // 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. Basic Layout

/*** Modal is the outermost layer, and ScrollView is the content Layer */render () {const {visible, sheetAnim} = this. state; return (<Modal visible = {visible} transparent = {true} animationType = "none" onRequestClose = {this. cancel }> <View style = {styles. wrapper }> <TouchableOpacity style = {styles. overlay} onPress = {this. cancel }> </TouchableOpacity> <Animated. view style = {[styles. bd, {height: this. translateY, transform: [{translateY: sheetAnim}]}> {this. _ renderTitle ()} <ScrollView horizontal = {true} showsHorizontalScrollIndicator = {false}> {this. _ renderContainer () }</ScrollView> </Animated. view> </Modal> )}

We can see that the basic layout is defined above. In the layout, the _ renderTitle () method is used to render the title part. The content area is ScrollView and it is horizontal scrolling, that is, when the menu item exceeds the screen width, you can slide horizontally. The renderContainer method is called internally to render the menu:

/*** Title */_ renderTitle () {const {title, titleStyle} = this. props; if (! Title) {return null} // determines whether the input is a React Element to prevent if (React. isValidElement (title) {return (<View style = {styles. title }>{ title }</View>)} return (<Text style = {[styles. titleText, titleStyle] }>{ title} </Text>)}/*** content Layout */_ renderContainer () {const {content} = this. props; return (<View style = {styles. container >{content }</View> )}

When we need to click Modal to close it, we also need to handle the close operation. Modal does not provide external close processing for us, so we need to implement it separately, from the layout code, we can see that TouchableOpacity serves as the mask layer, and adds a standalone event to call cancel to handle it:

/*** Control Modal click Close, Android return key close */cancel () {this. hide ();}

4. Custom methods for external calls

You need to control the display and hiding of controls externally, so you need to display and disable the controls externally:

/*** Display */show () {this. setState ({visible: true}) Animated. timing (this. state. sheetAnim, {toValue: 0, duration: 250 }). start ();}

/*** Hide */hide () {this. setState ({visible: false}) Animated. timing (this. state. sheetAnim, {toValue: this. translateY, duration: 150 }). start ();}

5. Use

<ActionSheet ref = 'sheet 'title = 'share' content = {this. _ renderContent ()}/>

Now, the custom component is complete. In general, the basic principle is still very simple. It can be easily implemented by using custom attributes, passing parameters, and animation. The focus of this blog is not to let everyone know how to write this effect, but to let everyone know how to implement it step by step when we encounter a custom implementation.

III,

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.