Question

我正在研究react native。这是我的第一天。我想设计标题。我已经在 app.js 文件中添加了标头，就像这样。

export default class App extends Component {
render() {
return (
  <View>
    <Header headerText="About us"/>
  <View style={styles.container}>
    <Text style={styles.welcome}>Welcome to React Native!</Text>
    <Text style={styles.instructions}>To get started, edit App.js</Text>
    <Text style={styles.instructions}>{instructions}</Text>
  </View>
  </View>
);
 }

我已经制作了一个像这样的独立类header.js文件：

const Header = (props) => {
    const { textStyle, viewStyle } = styles;
    return (
        <View style={viewStyle}>
        <Text style={textStyle}>{props.headerText}</Text>
        <Image source={require('./image.png')} style={{height:24, width:24}}/>
        </View>
        );
};

const styles = {
    viewStyle: {
        backgroundColor: '#a01b1b',
        height: 66,
        justifyContent: 'center',

        alignItems:'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.9,
        elevation: 2,
        position: 'relative',
        paddingTop: Platform.OS === 'ios' ? 25 : 0,
    },
    textStyle: {
        fontSize: 20,

        padding:10
    },

};

但是我没有标题。

Answer 1

将header.js导入到app.js文件的顶部。

import Header from './header';

在上述导入中将正确的路径添加到'./header'。

导出header.js底部的'header.js'文件。

export default header;

设置标头反应本机

1 个答案: