2019-10-01 16:10:10 qq_29069777 阅读数 54
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

具体background简写可以参考这篇文章.

这里注意,如果简写里要写background-size,则这里必须写 /  ,否则整个背景图片样式没有解析出来。

它和font以及border-radius里简写方式使用的

/
用法相似。
/
可以在支持这种写法的浏览器里在
background-position
后面接着写
background-size

<div style={{
                            display: 'inline-block',
                            width: '208px',
                            height: '100%',
                            background: `url("${thumb[0]}") center center / cover no-repeat`,
                        }}>
</div>

效果如图:

代码解析之后样式:(即使顺序不是这样写的解析出来也是这样的)

 如果分开写background其他设置,会出现一个问题,就是第一次加载图片是cover覆盖的,no-repeat,center center,但是打开其他页面再回来这些样式就都不生效了,只剩一个背景图片了。


更多专业前端知识,请上【猿2048】www.mk2048.com
2018-05-12 10:38:35 qq_41915690 阅读数 2145
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

在html内使用的标签,如

 

<div>
</div>

<p></p>

等标签无法在手机环境下运行,但html标签可以在浏览器环境下运行。

如果需要在手机内设置盒子的话,需要用View等组件替代:

需要注意的是,在react native内使用组件前需要引入:

现在自由发挥,打造属于自己的页面吧!

 

附:

规范化文件布局:https://blog.csdn.net/qq_41915690/article/details/80216039

初次运行项目会遇到的问题解决方法:https://blog.csdn.net/qq_41915690/article/details/80289475

运行项目简易方法:https://blog.csdn.net/qq_41915690/article/details/80155372

 

 

 

2018-04-04 15:53:11 qq_29819449 阅读数 3969
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

1.import logo from "../../style/imgs/logo.png"//图片相对路径

2.

 render() {
        return (

            <div className="login" style={{backgroundImage:`url(${logo})`}}>//添加背景图片

              <img src={logo}/>//添加img图片

            </div>

        );
    }



2017-02-13 11:31:44 jing85432373 阅读数 4512
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

1.modal点击其他区域消失
<TouchableWithoutFeedback
    onPress={()=>this.setState({showTopMenu:false})}>
    <View style={{position: 'absolute',left: 0,right: 0,top: 0,bottom: 0,width: null,}}/>
</TouchableWithoutFeedback>


2.图片做背景

<Image
    style={styles.img}
    source={require('../image/IMG_0026.jpg')}
    resizeMode='cover'
/>


img: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    height: null,
    width: null,
},
2018-03-18 11:41:45 zouh613 阅读数 6046
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57543 人正在学习 去看看 李宁

网上看好多都不能用,正确的做法:

backgroundImage: "url(" + require("../imgs/bg_pc.jpg") + ")"

截图示例

react 设置div的背景

阅读数 521

没有更多推荐了,返回首页