React Native 之组件的定义

Posted 2022-08-25 liuw-flexi

App.js 也可以认为是一个组件，那么此文件中能定义多个组件吗？

方式一

import Hello from ‘./Hello‘ 
export default class App extends Component 

  render()
    return (
      <View>
        <Hello name="你伟哥"/>
      </View>
    );
  
  

 

方式二

// 函数式写法 无状态 不能用this
function App(props) 
  return <Text style=fontSize:20,backgroundColor:‘red‘,marginTop:50>Hello.props.name</Text>

module.exports=App;

 

使用react-native init XXX 命令创建项目时，他创建组件是这样：

只有方式一能写组件的生命周期函数

const 关键字的作用是什么，去掉也没事？好像是的

const App = () => 
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style=styles.scrollView>
          <Header />
          global.HermesInternal == null ? null : (
            <View style=styles.engine>
              <Text style=styles.footer>Engine: Hermes</Text>
            </View>
          )
          <View style=styles.body>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Step One</Text>
              <Text style=styles.sectionDescription>
                Edit <Text style=styles.highlight>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>See Your Changes</Text>
              <Text style=styles.sectionDescription>
                <ReloadInstructions />
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Debug</Text>
              <Text style=styles.sectionDescription>
                <DebugInstructions />
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Learn More</Text>
              <Text style=styles.sectionDescription>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
;

const styles = StyleSheet.create(
  scrollView: 
    backgroundColor: Colors.lighter,
  ,
  engine: 
    position: ‘absolute‘,
    right: 0,
  ,
  body: 
    backgroundColor: Colors.white,
  ,
  sectionContainer: 
    marginTop: 32,
    paddingHorizontal: 24,
  ,
  sectionTitle: 
    fontSize: 24,
    fontWeight: ‘600‘,
    color: Colors.black,
  ,
  sectionDescription: 
    marginTop: 8,
    fontSize: 18,
    fontWeight: ‘400‘,
    color: Colors.dark,
  ,
  highlight: 
    fontWeight: ‘700‘,
  ,
  footer: 
    color: Colors.dark,
    fontSize: 12,
    fontWeight: ‘600‘,
    padding: 4,
    paddingRight: 12,
    textAlign: ‘right‘,
  ,
);

export default App;