记React Native 组件

发表于   |   分类于   |     |   热度

茫茫多

Flex 布局:

  1. flexDirection

  2. alignItems

  3. justifyContent

ActivityIndicator:

  1. animating

  2. color

  3. size (small, large) Android 情况下可以输入 number
  4. hidesWhenStopped (iOS，当停止时，是否隐藏，默认是true)

Button:

  1. color

  2. disable

  3. title
  • onPress

DatePickerIOS:

  1. date

  2. maximumDate

  3. minimumDate
  4. minuteInterval(分钟单位， 1，2，3，4，5，6，10，12，15，20，30)
  5. mode（date, time, datetime）
  6. timeZoneOffsetInMinutes
  • onDateChange

Text:

  1. numberOfLines

  2. onPress

  3. textAlign
  4. 后续的样式会覆盖之前的样式

TextInput:

  1. autoCapitalize 转换大写

    • characters 所有字符
    • words 每个单词的首字符
    • sentences 每句话的首字符
    • none

  2. autoCorrect 拼写自动修正

  3. autoFocus 自动响应

  4. defaultValue

  5. editable
  6. keyboardType
  7. maxLength
  8. multiline
  9. placeholder
  10. placeholderTextColor
  11. secureTextEntry
  12. value

  13. clearButtonMode (iOS)

    • never
    • while-editing
    • unless-editing
    • always

  14. keyboardAppearance(iOS)

    • default/light/dark

  15. returnKeyType

  • onChange
  • onChangeText
  • onEndEditing
  • onSubmitEditing

ListView:

  • dataSource

  • renderRow

  • initialRoute
    1
    2
    3
    4
    5
    6
    7
    8
    9
    initialRoute={{
        		title: '导航',
            	index: 0,
         		component: MainView /*导航器的视图页面*/
         		params: {
         		
         		}
         }}
  • renderScene
    1
    2
    3
    4
    5
    6
    7
    8
    renderScene={(route, navigator) => {
            	let Component = route.component;
            	return <Component
                     {...route.params}
                     navigator={navigator}
    		/>
    	}}

  1. initialRoute

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    1. component:
    2. title:
    3. titleImage: require('./img/icon1.png')
    4. passProps:参数传递，跟上面区分
    5. backButtonTitle:
    6. backButtonIcon: 
    7. leftButtonTitle:
    8. onLeftButtonPress:
    9. navigationBarHidden:
    10. shadowHidden:
    11. tintColor:
    12. titleTextColor:
    13. translucent:
    {
    	leftButtonTitle: 'back',
    	rightButtonIcon: (require('./img/left.png')),
    	onLeftButtonPress: ()=>{
    	     this.props.navigator.pop()
    	 }
     }

  2. interactivePopGestureEnabled

  3. navigationBarHidden:
  4. shadowHidden:
  5. tintColor:
  6. titleTextColor:
  7. translucent:
  • push(route)
  • popN(number)
  • pop()
  • popToTop()

state:

  • this.state = { };

  • this.setState({});

Image:

  1. resizeMode：

    • cover(覆盖容器)
    • contain（适合容器）
    • stretch（充满）

  2. source:

    • 使用静态图片时，不需要指定大小style

      1
      <Image source = {require('./icon.png')} />

    • js 使用app中的图片资源需要设置大小style

      1
      <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

    • 网络图片同上，也需要设置size

  3. defaultSource， iOS上的placeholder

  4. onProgress iOS 监听下载进度

TabBarIOS:

  1. barTintColor bar背景

  2. tintColor 标签被选中之后的颜色

  3. unselectedTintColor 标签未选中的颜色(待定)
  4. translucent 是否半透明化

TabBarIOS.Item:

  1. badge

  2. title

  3. renderAsOriginal 配合icon使用

  4. selectedIcon
  5. icon 图标，当设置systemIcon时，icon无效果
  6. systemIcon (‘bookmarks’, ‘contacts’, ‘downloads’, ‘favorites’, ‘featured’, ‘history’, ‘more’, ‘most-recent’, ‘most-viewed’, ‘recents’, ‘search’, ‘top-rated’)

  7. selected 当前标签选中状态，

    1
    selected={this.state.selectedTab === '当前tab'}

  8. onPress 

1
2
3
4
5
6
7
8
9
10
11
12
13
<TabBarIOS.Item
     icon={require('./img/icon2.png')}
     selectedIcon={require('./img/icon3.png')}
     renderAsOriginal
     title='More'
     selected={this.state.selectedTab === 'greenTab'}
     onPress={()=>{
         this.setState({
             selectedTab: 'greenTab',
             presses: this.state.presses + 1
         });
     }} >
 </TabBarIOS.Item>

Test地址