如何将图标放在我的“盒子”中以反应原生？

Question

我已经构建了一个包含我的组件样式的“框”，我设法只放了文本，但没有成功，请帮助图标/图像

我已经构建了一个包含我的组件样式的“框”，我设法只放了文本，但没有成功，请帮助图标/图像

我已经构建了一个包含我的组件样式的“框”，我设法只放了文本，但没有成功，请帮助图标/图像

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

有几个库来处理图标组件：

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

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

<Icon name='rowing' />

React Native 矢量图标：https://github.com/oblador/react-native-vector-icons

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

<Icon name="user" />

React Native 图标：https://github.com/corymsmith/react-native-icons

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

希望对你有帮助