I recently co-developed an app using React-Native to record some potholes. I use a MAC computer for development, this paper only record the platform 📝

Xcode could not be downloaded

Upgrade your MAC system to the latest version, then download Xcode from the MAC App market.

app Store -> Develop -> xcode
Copy the code

Please keep the network smooth, upgrade the system and download and install Xcode will take time, please wait patiently

ran “xcodebuild” command, error code for 65

This error may occur when running:

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening demo_native.xcodeproj
Copy the code

You can refer to the following steps to solve the problem:

  • Use Xcode to current the current project, as inFile -> Open -> demo_native -> ios
  • chooseFile -> Project Setting -> Advanced -> Custom -> Relative to workspace
  • rm -rf node_modules
  • killall -9 com.apple.CoreSimulator.CoreSimulatorService
  • sudo react-native run-ios

react-native run-iosAfter the reaction

After completing the relevant download, there is still no response after two or three minutes of running the React-Native project. Please make sure your network is working and running again, and wait for a while.

The first run takes a long time, but the second run is faster

appearEntry, ":CFBundleIdentifier", Does Not Existerror

After executing the react-native run-ios command, Entry “:CFBundleIdentifier”, Does Not Exist, which can be fixed by changing the file Settings. Xcode opens the file directory. File -> Project Setting -> Advanced -> Custom -> Relative to workspace. If that still doesn’t work, use a better climbing tool (e.g. SS instead of blue light).

The most important thing is to keep the network good, or the related dependencies will fail to download

Implement hot loading of pages

After the project started, the emulator on the MAC was started, but the emulator could not be hot loaded after modifying the code saved on the IDE. At this point, you should turn on the project hot loading function of the simulator. The practice is as follows:

Enter the executing project in the emulator, then press Command + D on the MAC to bring up the dialog and select Enable Live Reload.

Associated browser debugging

After running the project, you can debug your application’s JS from within the browser. Debugging operations:

  • Run the project and open it in your browserhttp://localhost:8081/debugger-ui/
  • Start the remote JS debugger in a started project.command+d -> Debug JS Remotely

⚠️ [Enabling remote debugging will slow down the running speed of the APP, and can be enabled only when necessary]

Based on the point

Props and state

Props is specified in the parent component and does not change during the lifecycle of the component being specified. If you need to change data, you can use state.

This binding

ES6 custom functions use this keyword, need to bind it to manipulate, otherwise this pointer will point to empty. Operation example:

. constructor(props) {super(props);
	this.state = {
		data: [].loaded: false
	},
	this.fetchData = this.fetchData.bind(this);
}
fecthData() {
	fetch(REQUEST_URL){
		this.setState({
			data: this.state.data.concat(['name'])}}}Copy the code

Several ways to write styles

1. Use the class name

// Single class name <View style = {styles.container}> <Text>some awesome Text </Text> </View> const styles = StyleSheet. Create ({ container: { backgroundColor: '#f8f8f8', flex: <View style = {[styles.container, styles.colorRed]}> <Text>some awesome text</Text> </View> const styles = StyleSheet.create({ container: { backgroundColor: '#f8f8f8', flex: 1 }, colorRed: { color: '#f00' } })Copy the code

2. Use inline styles

<View style = {{ backgroundColor: '#f8f8f8', flex: 1 }}>
	<Text>some awesome text</Text>
</View>
Copy the code

3. Combine class names with inline styles

<View style = { [styles.container, { color: '#f00' }] }>
	<Text>some awesome text</Text>
</View>

const styles = StyleSheet.create({
	container: {
		backgroundColor: '#f8f8f8',
		flex: 1
	}
})
Copy the code

The parent component passes values

State management tools, such as Redux, are not introduced here.

1. The parent component passes the value to the child component

Passes values through props

/ / the parent component
import Child from 'path/to/Child'

<View>
	<Child name='jiaming'/>
</View>

/ / child component
render() {
	const { name } = this.props;
	return(
		<View>
			<Text> { name } </text>
		</View>)}Copy the code

2. Child components pass values to parent components

Pass the value through the props method

/ / the parent component
import Child from 'path/to/Child'

getValue(data) {
	console.log(data);
}

render() {
	return (
		<View>
			<Child getValue = { this.getValue.bind() }>
		</View>} // Sub-component trigger() {this.props. GetValue ({name: 'name from child component'}); } render() { return (<View>
			<Text onPress={ this.trigger.bind(this) }> some awesome text </Text>
		</View>)}Copy the code

Does the parent component’s data state change and the child component’s data remain unchanged?

In the parent component, the parent component’s data changes, but the child component’s data does not. Such as:

/ / the parent component
import Child from 'path/to/Child'

Fn() {
	this.setState({
		name: 'jiaming'
	});
}

<View>
	<Child name = { this.state.name} / >
</View>

Copy the code

If the data appears unchanged in the child component, the following should be done in the child component:

  • Treatment within the componentWillReceiveProps hooks
  • ComponentWillReceiveProps hooks on incoming props parameter replace function enclosing props

Examples are as follows:

componentWillReceiveProps(props) { // props is to be added
	const {
		name
	} = props; // This. Props cannot be used, otherwise it will render data out of sync
	this.setState({
		name: name
	});
}
Copy the code

Introducing variables in setState

We usually use setState when we change the value of state, for example:

constructor(props){
	super(props);
	this.state = {
		name : ' '
	}
}

Fn() {
	this.setState({
		name: 'jiaming'})}Copy the code

The key value in setState above is name, so what if I use a variable instead of name?

A: Use brackets [] to wrap. The following demo

Fn() {
	const _name = 'jiaming';
	this.setState({
		[_name]: 'jiaming'})}Copy the code

render returnIn the conditional judgment writing method

In the View page, there are many times that you need to judge by the conditions, so you can wrap the relevant notation in braces {}. Such as:

constructor(props){
	super(props);
	this.state = {
		typeFlag: 1
	}
}
render() {
	return (
		<View>
			{
				typeFlag == 1 ?
					<Text>type flag is one</Text>
					:
					typeFlag == 2 ?
						<Text>type flag is two</Text>
						:
						null
			}
		</View>)}Copy the code

You use Modal to block out the underlying content

So in the beginning, after you’ve introduced Modal, you’ve executed the code, you’ve popped Modal, you can’t see what’s underneath, which makes no sense. Solution: Introduce the property transparent.

As follows:

render() {
	return (
		<Modal
			animationType='slide'
			transparent='true'>
			<View>
				<Text>some awesome text</Text>
			</View>
		</Modal>)}Copy the code

How javascript is introduced

1. Inline writing

<TouchableOpacity onPress={ () => console.log('this is a demo')}>
	<Text>some awesome text</Text>
</TouchableOpacity>
Copy the code

2. Inline Pointers

handleEvent() {
	console.log('this is a demo');
}

<TouchableOpacity onPress={ this.handleEvent.bind(this) }>
	<Text>some awesome text</Text>
</TouchableOpacity>
Copy the code

Write events in navigation

Using a react Native navigation method like this.handleMethod does not work.

static navigationOptions = ({navigation}) = > ({
    headerLeft: (
        <TouchableOpacity onPress = { this.handleMothed.bind(this) }>
            <Text style={{ color: '#999', paddingLeft: 10}} >return</Text>
        </TouchableOpacity>)}); handleMothed(){console.log('this is a demo');
}
Copy the code

You should write (such. Using this props. Navigation. SetParams) :

static navigationOptions = ({navigation}) = > ({
        headerRight: (
            <TouchableOpacity onPress= {()= >navigation.state.params.handleComfirm()}  >
                <Text style={{ color: '#999', paddingLeft: 10}} >confirm</Text>
            </TouchableOpacity>))}); componentDidMount() {// After the component is loaded
        this.props.navigation.setParams({handleComfirm:this.handleComfirm})
    }

handleComfirm() {
	console.log('this is a demo');
}
Copy the code

Android ADB installed on MAC

Install using BREW.

- Brew-brew cask install android-platform-tools // install adb-adb devices // Start using ADB by defaultCopy the code

⚠️ During the installation, keep the network running smoothly.

Refer to the link: www.jianshu.com/p/bb74ae9d2…

The latter

The quotation of part of the article has been lost, I would be honored if it is similar. If there are mistakes, but also look at the officer to correct.

For more information please visit my blog