Question

我已经建立了一个盒子＆＃39;包含我对组件的风格，我已经设法只放置文本但没有成功使用icon / image plz help

App:

.....import Box from './src/box';
......

<View style={{height: 100,flexDirection:'row',flex:1}}>
          <Box someText={'sushi'}
          //, background source={require('./assets/sushi.png')}
          //,TouchableHighlight onPress={this.message_function}
          />
</View>

box:

import { StyleSheet, Dimensions, Text,View ,Image} from "react-native";
import React from 'react' ;

export default class Box extends React.Component {

   render() {
       return (
       <View style={styles.box}>

   <Text style={styles.paragraph}> {this.props.someText}</Text>
       </View>
       );
   }
}

const styles = StyleSheet.create({
    box: {
        flex: 1,
        height: 100,
        //backgroundColor: '#ccc',
        margin: 8,



    },
    paragraph: {


    //margin: 24,
    fontSize: 15,
    textAlignVertical:10,
    fontWeight: 'bold',
    textAlign: 'center',
    textAlignVertical: 'bottom',
    //top:0, left: 0, right: 0,
    color: '#000',
     width: '100%',
      height: '70%',
      backgroundColor: 'rgba(255,255,255,0.8)'
  }

});

Answer 1

您可以在<Image>

框中打包<View>或图标组件

所以它最终会是这样的：

<View style={styles.box}>
  <Image source={require('your-image-path')} />
</View>

图片组件文档：https://facebook.github.io/react-native/docs/image.html

有几个lib来处理Icon组件：

反应原生元素：https://react-native-training.github.io/react-native-elements/docs/icon.html

import { Icon } from 'react-native-elements'

<Icon name='rowing' />

反应原生矢量图标：https://github.com/oblador/react-native-vector-icons

import Icon from 'react-native-vector-icons/MaterialIcons';

<Icon name="user" />

反应原生图标：https://github.com/corymsmith/react-native-icons

import Icon from 'react-native-icons';
<Icon
  name='ion|beer'
  size={40}
  color='#887700'
/>

希望有所帮助

如何将图标放在我的盒子里面＃39;在本地做出反应？

1 个答案: