我现在正在学习React Native,最近我收到了下面的日志消息 .
警告:不推荐使用componentWillMount,将在下一个主要版本中删除 . 请改用componentDidMount . 作为临时解决方法,您可以重命名为UNSAFE_componentWillMount .
我正在做这个教程"React Native Tutorial: Building Android Apps with JavaScript" https://www.raywenderlich.com/178012/react-native-tutorial-building-android-apps-javascript
我该怎么做才能删除邮件?
我安装了react-native-cli并做了react-native init projectName . 我改变了package.json . 我改变了“react”:“^ 16.3.0-alpha.1”到“^ 16.2.0”然后我做了npm install .
我的package.json
{“name”:“PropertyFinder”,“version”:“0.0.1”,“private”:true,“scripts”:{“start”:“node node_modules / react-native / local-cli / cli.js start“,”test“:”jest“},”dependencies“:{”react“:”^ 16.2.0“,”react-native“:”0.54.0“,”react-navigation“:”^ 1.3 . 0“},”devDependencies“:{”babel-jest“:”22.4.1“,”babel-preset-react-native“:”4.0.0“,”jest“:”22.4.2“,”反应 - test-renderer“:”^ 16.2.0“},”jest“:{”preset“:”react-native“}}
但仍然显示出警告 .
SearchPage.js
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image
} from 'react-native';
// import { StackNavigator } from 'react-navigation';
export default class SearchPage extends Component<{}> {
static navigationOptions = {
title: 'Property Finder',
};
constructor(props) {
super(props);
this.state = {
searchString: 'london'
};
}
_onSearchTextChanged = (event) => {
console.log('_onSearchTextChanged');
this.setState({
searchString: event.nativeEvent.text
});
console.log('Current: ' + this.state.searchString + ', Next: ' + event.nativeEvent.text);
}
render() {
console.log('SearchPage render');
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
<View style={styles.flowRight}>
<TextInput
underlineColorAndroid={'transparent'}
style={styles.searchInput}
value={this.state.searchString}
onChange={this._onSearchTextChanged}
placeholder='Search via name or postcode' />
<Button
onPress={() => {}}
color='#48bbec'
title='Go'
/>
</View>
<Image source={require('./Resources/house.png')} style={styles.image} />
</View>
);
}
}
const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginBottom: 20,
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flexGrow: 1,
fontSize: 18,
borderWidth: 1,
borderColor: '#48bbec',
borderRadius: 8,
color: '#48bbec',
},
image: {
width: 217,
height: 138,
},
});
App.js
'use strict';
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import SearchPage from './SearchPage';
// type Props = {};
const App = StackNavigator({
Home: {
screen: SearchPage,
},
});
export default App;
对不起,我的英语不好 .
1 回答
enter link description here
在React v16.3之后,根据生命周期功能进行调整,然后熟悉它 .