開發(fā)環(huán)境的搭建
參照官方文檔按照步驟來褐墅，開發(fā)工具選擇的是WebStorm 環(huán)境搭建
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'
基礎(chǔ)語法
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
跳轉(zhuǎn)到某個界面曹阔，可以傳遞參數(shù)半开，也可以傳遞一個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 () {
//解析數(shù)據(jù)
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寂拆，在跳轉(zhuǎn)到的界面回到該界面的時候執(zhí)行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();
}} />
};
};
