javascript - How to render Image and Text inline using React Native? - Stack Overflow

admin管理员组

文章数量:1384726

How can I get the share icon on the same row as the text?

import React, {Component} from 'react';
import {
    ActivityIndicator,
    AsyncStorage,
    Dimensions,
    Image,
    ScrollView,
    Share,
    StatusBar,
    StyleSheet,
    TouchableOpacity,
    View
} from 'react-native';

import {Text} from 'react-native-elements';
import {Button} from 'react-native-share';
import Hyperlink from 'react-native-hyperlink'
import Icon from 'react-native-vector-icons/dist/FontAwesome';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

const IMAGE_SIZE = SCREEN_WIDTH - 80;

class CustomButton extends Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    ponentDidMount() {
        const {selected} = this.props;
        this.setState({
            selected
        });
    }

    render() {
        const {title} = this.props;
        const {selected} = this.state;


        return (
            <Button
                title={title}
                titleStyle={{fontSize: 15, color: 'white'}}
                buttonStyle={selected ? {
                    backgroundColor: 'rgba(213, 100, 140, 1)',
                    borderRadius: 100,
                    width: 127
                } : {
                    borderWidth: 1,
                    borderColor: 'white',
                    borderRadius: 30,
                    width: 127,
                    backgroundColor: 'transparent'
                }}
                containerStyle={{marginRight: 10}}
                onPress={() => this.setState({selected: !selected})}
            />
        );
    }
}

class Fonts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            selectedIndex: 0,
            value: 0.5,
            dataSource: null,
            isLoading: true,
            visible: false
        };
        thisponentDidMount = thisponentDidMount.bind(this);
    }

    getNavigationParams() {
        return this.props.navigation.state.params || {}
    }

    ponentDidMount() {
        if (AsyncStorage.getItem('name')) {
            this.setState({'name': AsyncStorage.getItem('name')});
        }
        return fetch('/' + this.props.navigation.state.params.id + '.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    ...this.state,
                    isLoading: false,
                    dataSource: responseJson,
                    fontLoaded: true
                }, function () {
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }

    onCancel() {
        console.log("CANCEL")
        this.setState({visible: false});
    }

    onOpen() {
        console.log("OPEN")
        this.setState({visible: true});
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{flex: 1, padding: 20}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        let shareOptions = {
            message: '/' + this.props.navigation.state.params.id + '.html',
            url: '',
            title: this.state.dataSource.title,
                subject: this.state.dataSource.title //  for email
        };

        return (
            <View style={{flex: 1}}>
                <StatusBar
                    barStyle="light-content"
                />

                {this.state.fontLoaded ?

                    <View style={{flex: 1, backgroundColor: 'rgba(47,44,60,1)'}}>

                        <View style={styles.statusBar}/>
                        <View style={styles.navBar}><TouchableOpacity onPress={() => {
                            Share.share(shareOptions);
                        }}>
                            <View>
                                <Text>     <Icon color="white" name="share-alt" size={42}/></Text>
                            </View>
                        </TouchableOpacity>
                            <Text style={styles.nameHeader}>
                                {this.state.dataSource.title}
                            </Text>
                        </View>
                        <ScrollView style={{flex: 1}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image
                                    source={{uri: this.state.dataSource.img ? this.state.dataSource.img : ".png"}}
                                    style={{width: IMAGE_SIZE, height: IMAGE_SIZE, borderRadius: 10}}
                                />

                            </View>
                            <View style={{
                                flex: 1,
                                flexDirection: 'row',
                                marginTop: 20,
                                marginHorizontal: 40,
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <Text style={{flex: 1, fontSize: 26, color: 'white'}}>
                                    {this.state.dataSource.title}
                                </Text>

                            </View>
                            <View style={{flex: 1, marginTop: 20, width: SCREEN_WIDTH - 80, marginLeft: 40}}>

                                <Text style={{flex: 1, fontSize: 15, color: 'white'}}>
                                    {this.state.dataSource.date}
                                </Text>
                                <Hyperlink linkDefault={true}>
                                <Text  style={{flex: 1, fontSize: 15, color: 'white'}} >
                                    {this.state.dataSource.text}
                                </Text>
                                </Hyperlink>
                            </View>


                        </ScrollView>
                    </View> :
                    <Text>Loading...</Text>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },    nameHeader: {
        color: 'white',
        fontSize: 22,
        textAlign: 'center'
    },
    textStyle: {
        fontSize: 18,
        padding: 10,
    },
});

export default Fonts;

It works as expected but I want to render the share icon on the same row as the title text. Can it be done?

How can I get the share icon on the same row as the text?

import React, {Component} from 'react';
import {
    ActivityIndicator,
    AsyncStorage,
    Dimensions,
    Image,
    ScrollView,
    Share,
    StatusBar,
    StyleSheet,
    TouchableOpacity,
    View
} from 'react-native';

import {Text} from 'react-native-elements';
import {Button} from 'react-native-share';
import Hyperlink from 'react-native-hyperlink'
import Icon from 'react-native-vector-icons/dist/FontAwesome';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

const IMAGE_SIZE = SCREEN_WIDTH - 80;

class CustomButton extends Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    ponentDidMount() {
        const {selected} = this.props;
        this.setState({
            selected
        });
    }

    render() {
        const {title} = this.props;
        const {selected} = this.state;


        return (
            <Button
                title={title}
                titleStyle={{fontSize: 15, color: 'white'}}
                buttonStyle={selected ? {
                    backgroundColor: 'rgba(213, 100, 140, 1)',
                    borderRadius: 100,
                    width: 127
                } : {
                    borderWidth: 1,
                    borderColor: 'white',
                    borderRadius: 30,
                    width: 127,
                    backgroundColor: 'transparent'
                }}
                containerStyle={{marginRight: 10}}
                onPress={() => this.setState({selected: !selected})}
            />
        );
    }
}

class Fonts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            selectedIndex: 0,
            value: 0.5,
            dataSource: null,
            isLoading: true,
            visible: false
        };
        this.ponentDidMount = this.ponentDidMount.bind(this);
    }

    getNavigationParams() {
        return this.props.navigation.state.params || {}
    }

    ponentDidMount() {
        if (AsyncStorage.getItem('name')) {
            this.setState({'name': AsyncStorage.getItem('name')});
        }
        return fetch('http://www.koolbusiness./newvi/' + this.props.navigation.state.params.id + '.json')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    ...this.state,
                    isLoading: false,
                    dataSource: responseJson,
                    fontLoaded: true
                }, function () {
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }

    onCancel() {
        console.log("CANCEL")
        this.setState({visible: false});
    }

    onOpen() {
        console.log("OPEN")
        this.setState({visible: true});
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{flex: 1, padding: 20}}>
                    <ActivityIndicator/>
                </View>
            )
        }

        let shareOptions = {
            message: 'http://www.koolbusiness./newvi/' + this.props.navigation.state.params.id + '.html',
            url: 'http://bam.tech',
            title: this.state.dataSource.title,
                subject: this.state.dataSource.title //  for email
        };

        return (
            <View style={{flex: 1}}>
                <StatusBar
                    barStyle="light-content"
                />

                {this.state.fontLoaded ?

                    <View style={{flex: 1, backgroundColor: 'rgba(47,44,60,1)'}}>

                        <View style={styles.statusBar}/>
                        <View style={styles.navBar}><TouchableOpacity onPress={() => {
                            Share.share(shareOptions);
                        }}>
                            <View>
                                <Text>     <Icon color="white" name="share-alt" size={42}/></Text>
                            </View>
                        </TouchableOpacity>
                            <Text style={styles.nameHeader}>
                                {this.state.dataSource.title}
                            </Text>
                        </View>
                        <ScrollView style={{flex: 1}}>
                            <View style={{justifyContent: 'center', alignItems: 'center'}}>
                                <Image
                                    source={{uri: this.state.dataSource.img ? this.state.dataSource.img : "http://www.koolbusiness./_/images/icons/electronics_icon.png"}}
                                    style={{width: IMAGE_SIZE, height: IMAGE_SIZE, borderRadius: 10}}
                                />

                            </View>
                            <View style={{
                                flex: 1,
                                flexDirection: 'row',
                                marginTop: 20,
                                marginHorizontal: 40,
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <Text style={{flex: 1, fontSize: 26, color: 'white'}}>
                                    {this.state.dataSource.title}
                                </Text>

                            </View>
                            <View style={{flex: 1, marginTop: 20, width: SCREEN_WIDTH - 80, marginLeft: 40}}>

                                <Text style={{flex: 1, fontSize: 15, color: 'white'}}>
                                    {this.state.dataSource.date}
                                </Text>
                                <Hyperlink linkDefault={true}>
                                <Text  style={{flex: 1, fontSize: 15, color: 'white'}} >
                                    {this.state.dataSource.text}
                                </Text>
                                </Hyperlink>
                            </View>


                        </ScrollView>
                    </View> :
                    <Text>Loading...</Text>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },    nameHeader: {
        color: 'white',
        fontSize: 22,
        textAlign: 'center'
    },
    textStyle: {
        fontSize: 18,
        padding: 10,
    },
});

export default Fonts;

It works as expected but I want to render the share icon on the same row as the title text. Can it be done?

• javascript
• react-native

Share Improve this question Follow edited Mar 24, 2018 at 15:55 Jon Miles 9,9031111 gold badges4848 silver badges6767 bronze badges asked Mar 24, 2018 at 12:13 Niklas RosencrantzNiklas Rosencrantz 26.7k7777 gold badges243243 silver badges444444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use "flexDirection" to 'row' and group share icon along with the title in a view:

<View style={styles.navBar}>
   <TouchableOpacity onPress={() => {Share.share(shareOptions); }}>
          <View>
              <Text>     
                 <Icon color="white" name="share-alt" size={42}/>
              </Text>
           </View>
         </TouchableOpacity>
         <Text style={styles.nameHeader}>
               {this.state.dataSource.title}
         </Text>
       </View>

add the below styling to your navBar className :

navBar: {
    flex: 1,
    flexDirection: 'row'
  },

Also, you are using Text and a View in your TouchableOpacity which I think is not needed so I removed those and did a snack on expo similar to your code, please check it here :

https://snack.expo.io/Hk3lrAQ9f

本文标签： javascriptHow to render Image and Text inline using React NativeStack Overflow