Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image: not inline-block within Text #472

Closed
wollld opened this issue May 8, 2017 · 8 comments
Closed

Image: not inline-block within Text #472

wollld opened this issue May 8, 2017 · 8 comments
Labels
Milestone

Comments

@wollld
Copy link

wollld commented May 8, 2017

<View style={OneTaskStyle.center}>
                    <View style={OneTaskStyle.center_l1}>
                        <Text style={{fontSize:16}}>
{'this.props.name我看不件你哦你在哪里啊'}
<Image source={require("./icon_ding.png")} style={OneTaskStyle.ding}/>
                        </Text>

                    </View>
                    <View style={OneTaskStyle.center_l2}>
                        <Text>{"关注:"+this.props.concernNum}</Text>
                        <Text>{" 距离:"+(this.props.distance?(this.props.distance>=1000? Math.floor((this.props.distance/1000)/1000)+"km":this.props.distance+"m") :"--")}</Text>
                    </View>
                    <View>

                    </View>
                </View>
@RangerMauve
Copy link

Pretty sure that putting an <Image /> inside a <Text /> component is an error. If you want them to be side by side, try something like:

<View style={{flexDirection: "row"}}>
  <Text>Whatever text here</Text>
  <Image source={whateversourcehere />
</View>

@wollld
Copy link
Author

wollld commented May 9, 2017

if have more than one row it is not ok,it is left and right

@necolas necolas changed the title image 解释为div 成为了块元素 换行了 。不是我想要的结果【image compile to div;not inline-block ;and render in a new line】 Image is not inline-block within Text May 9, 2017
@RangerMauve
Copy link

You could use flexWrap: "wrap" in the parent View in order to have the overflow mechanics you'd get from inline-block.

React Native doesn't support display: block or display: inline-block, they only support flexbox for layout.

@wollld
Copy link
Author

wollld commented May 10, 2017

it not work
i add flexwrap it like this:
xxxxxxxxxxxxxxxxxxx
xxx
image

@wollld
Copy link
Author

wollld commented May 10, 2017

<View style={{flexDirection: "row"}}>

Whatever text here


on platform native style is :
xxxxxxxxxxxxxxxx
xxxxximage
but image is very small
on platform web style is:
xxxxxxxxxxxxxxxxx
xxxxx
image
image size is ok but image is a new line
so a add a style in web html style
div[style*='background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEU']{
display:inline-block;
}
it work on web and native
but i think it is not a good way
how to solve it?

@wollld
Copy link
Author

wollld commented May 10, 2017

<View style={{flexDirection: "row"}}> <Text>Whatever text here <Image source{whateversourcehere /></Text> </View>

@RangerMauve
Copy link

Hmm, sadly I'm not really sure how to solve it other than the method that you used. Maybe @necolas has more insight as to what's happening there. Sorry!

@necolas necolas changed the title Image is not inline-block within Text Image: not inline-block within Text May 25, 2017
@necolas necolas added the bug label Jun 9, 2017
@necolas necolas modified the milestone: 0.1.0 release Jun 9, 2017
@necolas
Copy link
Owner

necolas commented Jun 12, 2017

This should be fixed in master and available in 0.0.101.

You can also see the fix in the Text example "Inline views": https://necolas.github.io/react-native-web/storybook/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants