React Native 读取本地图片，配置导航栏、tabbar图片

最新推荐文章于 2022-04-07 08:45:00 发布

嘘1987

最新推荐文章于 2022-04-07 08:45:00 发布

阅读量1.1k

点赞数

文章标签： React Native ios 移动开发

本文链接：https://blog.csdn.net/shyzh_li/article/details/80195726

版权

RN读取iOS本地图片，首先打开xcode工程，在Images.xcassets目录下新建img目录，将需要显示的图片添加到img目录下，重新运行程序。

NavigationIOS添加左右按钮图片，

leftButtonIcon:{uri:'nav_back', scale:2},
rightButtonIcon:{uri:'nav_back', scale:2}

Tabbar和NavigationIOS组合使用

<TabBarIOS tintColor={'#ff4c48'}>
    <TabBarIOS.Item title='逛店'
                    icon={{uri:'store_normal', scale:2}}
                    selectedIcon={{uri:'store_pressed', scale:2}}
                    selected={this.state.selectedBarItem==='store'}
                    onPress={()=>{this.setState({selectedBarItem:'store'})}}
    >
        <NavigatorIOS barTintColor='red'
                      titleTextColor='white'
                      style={styles.container}
                      initialRoute={
                          {
                              title:'逛店',
                              component:StoreViewController
                          }
                      }
        ></NavigatorIOS>
    </TabBarIOS.Item>

    <TabBarIOS.Item title='发现'
                    icon={{uri:'discover_normal', scale:2}}
                    selectedIcon={{uri:'discover_pressed', scale:2}}
                    selected={this.state.selectedBarItem==='discover'}
                    onPress={()=>{this.setState({selectedBarItem:'discover'})}}
    >
        <NavigatorIOS barTintColor='blue'
                      titleTextColor='white'
                      style={styles.container}
                      initialRoute={
                          {
                              title:'发现',
                              component:DiscoverViewController
                          }
                      }
        ></NavigatorIOS>
    </TabBarIOS.Item>

    <TabBarIOS.Item title='购物'
                    icon={{uri:'shopping_normal', scale:2}}
                    selectedIcon={{uri:'shopping_pressed', scale:2}}
                    selected={this.state.selectedBarItem==='shopping'}
                    onPress={()=>{this.setState({selectedBarItem:'shopping'})}}
    >
        <NavigatorIOS barTintColor='gray'
                      titleTextColor='white'
                      style={styles.container}
                      initialRoute={
                          {
                              title:'购物',
                              component:ShoppingViewController
                          }
                      }
        ></NavigatorIOS>
    </TabBarIOS.Item>
    <TabBarIOS.Item title='全球购'
                    icon={{uri:'global_normal', scale:2}}
                    selectedIcon={{uri:'global_pressed', scale:2}}
                    selected={this.state.selectedBarItem==='global'}
                    onPress={()=>{this.setState({selectedBarItem:'global'})}}
    >
        <NavigatorIOS barTintColor='yellow'
                      titleTextColor='white'
                      style={styles.container}
                      initialRoute={
                          {
                              title:'全球购',
                              component:GlobalViewController
                          }
                      }
        ></NavigatorIOS>
    </TabBarIOS.Item>
    <TabBarIOS.Item title='我的'
                    icon={{uri:'my_normal', scale:2}}
                    selectedIcon={{uri:'my_pressed', scale:2}}
                    selected={this.state.selectedBarItem==='mine'}
                    onPress={()=>{this.setState({selectedBarItem:'mine'})}}
    >
        <NavigatorIOS barTintColor='black'
                      titleTextColor='white'
                      style={styles.container}
                      initialRoute={
                          {
                              title:'我的',
                              component:MyViewController
                          }
                      }
        ></NavigatorIOS>
    </TabBarIOS.Item>
</TabBarIOS>