开发环境的搭建
参照官方文档按照步骤来，开发工具选择的是WebStorm 环境搭建
We want to share code on iOS and Android, so lets delete the contents of index.ios.js and index.android.js and replace it with import './App'
基础语法
props 和 state
props:
this.props contains the props that were defined by the caller of this component
state:
The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
If you don't use it in render(), it shouldn't be on the state. For example, you can put timer IDs directly on the instance.
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
component生命周期
Mounting
These methods are called when an instance of a component is being created and inserted into the DOM
- constructor() The constructor for a React component is called before it is mounted
constructor(props) {
super(props);
this.state = {
color: props.initialColor
};
}
- componentWillMount() is invoked immediately before mounting occurs. It is called before render()
- componentDidMount() is invoked immediately after a component is mounted.
Updating
- componentWillReceiveProps() is invoked before a mounted component receives new props.
- shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true
- componentWillUpdate() is invoked immediately before rendering when new props or state are being received.
Note
- you cannot call this.setState() here. If you need to update state in response to a prop change, use componentWillReceiveProps() instead.
- componentWillUpdate() will not be invoked if shouldComponentUpdate() returns false.
- componentDidUpdate is invoked immediately after updating occurs
Unmounting
- componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount
待补充
FlexBox布局
flexDirection
- column： (默认值)竖直轴，子视图上下排列
- row ：水平轴，姿势图水平排列
alignItems
- flex-start
- center
- flex-end
- stretch
justifyContent
- flex-start
- center
- flex-end
- space-around
- space-between
React-Navigation
安装：npm install --save react-navigation
StackNavigator
export type NavigationScreenProp<S, A> = {
state: S,
dispatch: NavigationDispatch<A>,
goBack: (routeKey?: ?string) => boolean,
navigate: (
routeName: string,
params?: NavigationParams,
action?: NavigationAction,
) => boolean,
setParams: (newParams: NavigationParams) => boolean,
};
-
navigate
跳转到某个界面，可以传递参数，也可以传递一个callback -
goBack
返回，出栈 -
params
传值到某个界面，在该界面中可以通过this.props.navigation.state.params去获得; - navigate的时候传值
constructor (props) {
super(props);
//定义属性
this.state = {
userName: ''
};
};
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
<Text style={{backgroundColor: 'red'}}>Chat with {this.state.userName}</Text>
</View>
);
};
componentDidMount () {
//解析数据
const {params} = this.props.navigation.state;
this.setState({
userName: params.user
});
}
- goBack的时候回传值
render() {
const { navigate } = this.props.navigation;
return(
<View>
<Text>{this.state.content}</Text>
<Button
onPress={() => navigate('Chat', { user: 'HeChao', callback: (data) => {
//console.log(data);
this.setState({content: `从chat界面回传的值 ${data}`});
}})}
title="Chat with HeChao"
/>
</View>
);
}
传递一个callback，在跳转到的界面回到该界面的时候执行callback回传值
static navigationOptions = ({ navigation }) => {
const {params} = navigation.state;
const {navigate,goBack,state} = navigation;
navigation.goBack();
return {
title: `Chat with ${params.user}`,
headerLeft : <Button title={'Back'} onPress={() => {
if (state.params.callback) {
state.params.callback('hahahaha');
}
goBack();
}} />
};
};
