设置标题反应原生

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;