非常教程

React native参考手册

Components: ToolbarAndroid

ToolbarAndroid

React组件,它包装了仅限Android的Toolbar小部件。工具栏可以显示徽标,导航图标(例如汉堡包菜单),标题和副标题以及一系列操作。标题和副标题被扩展,标志和导航图标显示在左侧,标题和副标题在中间,动作在右侧。

如果工具栏只有一个孩子,它将显示在标题和动作之间。

尽管工具栏支持徽标,导航和动作图标的远程图像,但只能在DEV模式下使用,这样才能require('./some_icon.png')转换为打包程序的URL。在发布模式下,您应该始终为这些图标使用可绘制资源。使用require('./some_icon.png')会自动为你做,所以只要你没有明确地使用例如{uri: 'http://...'},你会很好。

例:

render: function() {
  return (
    <ToolbarAndroid
      logo={require('./app_logo.png')}
      title="AwesomeApp"
      actions={[{title: 'Settings', icon: require('./icon_settings.png'), show: 'always'}]}
      onActionSelected={this.onActionSelected} />
  )
},
onActionSelected: function(position) {
  if (position === 0) { // index of 'Settings'
    showSettings();
  }
}

道具

ViewPropTypes道具...

actions?: [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]

将工具栏上的可能操作设置为操作菜单的一部分。这些显示为小部件右侧的图标或文本。如果他们不适合他们被放置在一个'溢出'菜单。

该属性需要一个对象数组,其中每个对象都有以下键:

  • title必需的,这个动作的标题
  • icon:这个动作的图标,例如 require('./some_icon.png')
  • show:当显示这个动作作为一个图标,或者隐藏在溢出菜单:alwaysifRoomnever
  • showWithText:布尔值,是否显示图标旁边的文字

contentInsetEnd?: number

设置工具栏结束边缘的内容插入。

内容嵌入会影响除导航按钮和菜单以外的工具栏内容的有效区域。插入定义这些组件的最小边距,并可用于沿着着名的网格线有效地对齐工具栏内容。

contentInsetStart?: number

设置工具栏开始边缘的内容插入。

内容嵌入会影响除导航按钮和菜单以外的工具栏内容的有效区域。插入定义这些组件的最小边距,并可用于沿着着名的网格线有效地对齐工具栏内容。

logo?: optionalImageSource

设置工具栏徽标。

navIcon?: optionalImageSource

设置导航图标。

onActionSelected?: function

选择操作时调用的回调。传递给回调函数的唯一参数是actions数组中action的位置。

onIconClicked?: function

当图标被选中时调用回调。

overflowIcon?: optionalImageSource

设置溢出图标。

rtl?: bool

用于将工具栏方向设置为RTL。除了这个属性你需要添加

android:supportsRtl="true"

到您的应用程序AndroidManifest.xml,然后setLayoutDirection(LayoutDirection.RTL)在您的MainActivity onCreate方法中调用。

subtitle?: string

设置工具栏字幕。

subtitleColor?: color

设置工具栏的字幕颜色。

testID?: string

用于在端到端测试中定位此视图。

title?: string

设置工具栏标题。

titleColor?: color

设置工具栏标题颜色。

Components: ToolbarAndroid相关

React native

React Native 是一个 JavaScript 的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。

主页 https://facebook.github.io/react-native/
源码 https://github.com/facebook/react-native
发布版本 0.49

React native目录

1.开始 | Getting Started
2.指南 | Guides
3.APIs
4.组件:ActivityIndicator | Components: ActivityIndicator
5.组件:按钮 | Components: Button
6.组件:CheckBox | Components: CheckBox
7.组件:DatePickerIOS | Components: DatePickerIOS
8.组件:DrawerLayoutAndroid | Components: DrawerLayoutAndroid
9.组件:FlatList | Components: FlatList
10.组件:图像 | Components: Image
11.组件:KeyboardAvoidingView | Components: KeyboardAvoidingView
12.Components: ListView
13.Components: MaskedViewIOS
14.Components: Modal
15.Components: NavigatorIOS
16.Components: Picker
17.Components: PickerIOS
18.Components: ProgressBarAndroid
19.Components: ProgressViewIOS
20.Components: RefreshControl
21.Components: ScrollView
22.Components: SectionList
23.Components: SegmentedControlIOS
24.Components: Slider
25.Components: SnapshotViewIOS
26.Components: StatusBar
27.Components: Switch
28.Components: TabBarIOS
29.Components: TabBarIOS.Item
30.Components: Text
31.Components: TextInput
32.Components: ToolbarAndroid
33.Components: TouchableHighlight
34.Components: TouchableNativeFeedback
35.Components: TouchableOpacity
36.Components: TouchableWithoutFeedback
37.Components: View
38.Components: ViewPagerAndroid
39.Components: VirtualizedList
40.Components: WebView
41.创建 | Contributing
42.指南(Android) | Guides (Android)
43.指南(IOS) | Guides (iOS)
44.其他 | Miscellaneous