Getting Started Edit on GitHub
Let’s get a sample app powered by ComponentKit up and running, then make some tweaks to experiment with how components work.
Clone the Github repo, and then open the Xcode project.
Run the project in the simulator to see a simple app that shows a list of quotes.
Let’s imagine we want to remove the white quote mark that’s circled in this screenshot:
First we’ll need to figure out which component we need to change. Pause the app in the debugger and execute the following command in lldb. This inserts special debug views in the hierarchy, as described in Debugging.
Then click the Debug View Hierarchy button in Xcode and browse through the view hierarchy:
Aha! So we need to modify
FrostedQuoteComponent. That file should make a few things clear:
- It uses the
- The content is inset by 20 points on the left and right, 70 points on the top, and 25 points on the bottom.
- The content is made up of two components stacked vertically: a
CKLabelComponentwith the quote, and a second
CKLabelComponentwith an end quote symbol.
The quote mark is created here:
Delete everything (including the curly braces), so that the
CKStackLayoutComponent only has a single child. Run the app again and the quote mark is gone!
Things look a little imbalanced now, though. There are 70 points of padding on top and only 25 points on bottom. Modify the
CKInsetComponent to change the bottom padding to be 70 points as well:
Run the app once more. Now it looks a lot better:
Congratulations! You’ve done your first development with ComponentKit. Keep poking around the sample app to learn more, or start using it in your own apps.