# 启动项目选择模拟器
react-native run-ios --simulator="iPhone 8”
npm 工具
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
控件
图片：Image
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width:193,height:110}}/>
// <Image style={{backgroundColor:'#333'}} source={{uri:pic, width: 64, height: 64}} />
);
视图：View
<View style={{alignItems:'center',marginTop: 5}}>
<Text>Hello {this.props.name}!</Text>
</View>
文本：Text
<Text>This is a Text</Text>
状态
State
一切界面变化都是状态state变化
state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效
// 声明state对象
state = { isShowingText: true };
componentDidMount() {
//每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState({
isShowingText: !this.state.isShowingText
});
}, 1000);
}
弹性布局 flex
Flex Direction
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。
Align Items
在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。
<View style={{
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch'
}}>
。。。
</View>
输入框
TextInput
属性：onSubmitEditing、placeholder
事件：onChangeText
<TextInput
style={{height: 40}}
placeholder= 'Tap here to translate!'
onChangeText={(text) => this.setState({text})}
value={this.state.text}>
</TextInput>
触摸控件
按钮 Button
<Button
onPress={() => { Alert.alert("你点击了按钮！"); }}
title="点 我！”
/>
Touchable 系列
注意：其为容器内部需要设置视图组件
TouchableOpacity
* 一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
* 在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
* TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
* 如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。
<TouchableHighlight
onPress={this._onPressButton}
onLongPress={this._onLongPressButton}
underlayColor="white”>
<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
<TouchableNativeFeedback
onPress={this._onPressButton}
background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : '’}>
<View style={styles.button}>
<Text
style={styles.buttonText}>
TouchableNativeFeedback
</Text>
</View>
</TouchableNativeFeedback>
<TouchableWithoutFeedback
onPress={this._onPressButton} >
<View style={styles.button}>
<Text style={styles.buttonText}>
TouchableWithoutFeedback
</Text>
</View>
</TouchableWithoutFeedback>
滚动视图
ScrollView
ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。
属性：horizontal 设置滚动方向 true/false
列表：FlatList、SectionList
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) =>
<Text style={styles.item}>{item.key}</Text>
}
/>
<SectionList
sections={[
{title: 'D', data: ['Devin', 'Dan', 'Dominic']},
{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
]}
renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
参考demo代码
网友评论