# React Native
# ã»ããã¢ãã
# ããã¥ã¡ã³ã
https://www.udemy.com/react-native-the-practical-guide/learn/v4/t/lecture/8567846?start=0
# ä»çµã¿
UI ã³ã³ããŒãã³ãã¯ãNative ã³ã³ããŒãã³ãã«ã³ã³ãã€ã«ãããã ããžãã¯ã¯ç¬èªã®ã¹ã¬ãã㧠JS ã®ããã§å®è¡ãããã JS ã®å®è¡ã«ã¯ Safari ã® JavaScriptCore ã Chrome ã® V8 ã䜿ãããã
䜿çšã§ãã JavaScript ã®æ§æã«ã€ããŠã¯äžèšãåç §ããããšã https://facebook.github.io/react-native/docs/javascript-environment
# Android ã§åãã
- JDK ãã€ã³ã¹ããŒã«ãã
- ç°å¢å€æ°ãèšå®ãã
- JAVA_HOME ã
C:\Program Files\Java\jdk1.8.0_181
- ANDROID_HOME
C:\Users\Shota\AppData\Local\Android\Sdk
- PATH ã
C:\Users\Shota\AppData\Local\Android\Sdk\platform-tools
- JAVA_HOME ã
adb reverse tcp:8081 tcp:8081
ãå®è¡ããyarn eject
㧠Eject ããïŒEject ããªããšãµãŒãããŒãã£ã®ã©ã€ãã©ãªã¯äœ¿ããªãïŒ
# ãšãã¥ã¬ãŒã¿ã§åãã
- Android Studio ã® Tools â Android â AVD Manager ãããšãã¥ã¬ãŒã¿ãäœæããã
- å¿ èŠãªããŒãžã§ã³ã® SDK ãã€ã³ã¹ããŒã«ãããŠããªããšãšã©ãŒãåºãã®ã§ãé©å®è¿œå ã§ã€ã³ã¹ããŒã«ãã
yarn android
ãå®è¡ãããšãReact Native ã®ã³ãŒãã Java ã«ã³ã³ãã€ã«ããããšãã¥ã¬ãŒã¿ã§ã¢ããªãç«ã¡äžããadb not found
ãšããã¡ãã»ãŒãžãåºãå Žåã¯ãadb.exe ã«ãã¹ãéã£ãŠããã確èªããããšã
# å®æ©ã§åãã
- PC ãš Android ãæ¥ç¶ããUSB ãããã°ãæå¹ã«ããããã§ã
yarn android
ãå®è¡ããã
# iPhone ã§åãã
- å¿ èŠã«ãªã£ããšãã«ã¬ã¯ãã£ãŒïŒïŒïŒïŒïŒãåç §ããããš
# ãã«ãã«å€±æãããšã
/android/app/build
ããŸãããšæ¶ããŠãããäžåºŠ sync ããŠã¿ããšããŸããããã
# Typescript ç°å¢ã®ã»ããã¢ãã
äžèšãåèã«ãã£ããã§ããã
https://github.com/Microsoft/TypeScript-React-Native-Starter
# ãããã°
# ã·ã§ãŒãã«ãã
ç®ç | Android | iPhone |
---|---|---|
ã¡ãã¥ãŒè¡šç€º | Ctrl + M ãããã¯ã·ã§ã€ã¯ | Ctrl + D ããããã¯ã·ã§ã€ã¯ |
ãªããŒã | R * 2 å | Ctrl + R |
端æ«ãå転 | Ctrl + ââ | Ctrl + ââ |
# Console.log
ãããã°ã¡ãã¥ãŒãã Debug JS Remotely ãéžæããã Console.log ã®å 容ããChrome ã®ãããããããŒã«ã«è¡šç€ºãããã
æ¥ç¶ã§ããªãã£ãå Žåã¯äžèšã®èšå®ãè¡ãããšã
- Press Cmd + M on emulator screen
- Go to Dev settings > Debug server host & port for device
- Set localhost:8081
# ãã¬ãŒã¯ãã€ã³ã
Debug JS Remotely ãæå¹ã«ããç¶æ ã§ãChrome Dev Tools ã® Source ã¿ãã§èšå®ããã
# react-native-debugger
react-native-debugger ã䜿ãã°ãRedux ãå«ããŠããããããã®ããããã°ããããšãã§ããããã«ãªãã®ã§ãå¿ ãã€ã³ã¹ããŒã«ããããšã ã»ããã¢ããã¯äžèšã®ããã«è¡ããRN ã®ãã°ã§ããã¬ãŒã¯ãã€ã³ããçŸåšäœ¿ããªãæš¡æ§ã
import { createStore, compose } from 'redux';
let composeEnhancers = compose;
if (__DEV__) {
composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}
const store = createStore(reducer, composeEnhancers());
# ã³ã³ããŒãã³ãã®äœæ
# ã¿ããã€ãã³ã
DOM ãšç°ãªããäŸãã° View ãªã©ã®ãªããžã§ã¯ãã¯ãããã©ã«ãã§ã¯ã¿ããã§ããªããã¿ããã§ããããã«ããã«ã¯Touchable****
ã³ã³ããŒãã³ãã§å²ããã¿ããæã®åå¿ããšã«ããã€ãã®çš®é¡ãããã
- TouchableHighlight ãã¿ããæã«æããã
- TouchableNativeFeedback ãã¿ããæã«ãã€ãã£ããšãã§ã¯ãããããïŒãªããã«ãªã©ïŒ
- TouchableOpacity ãã¿ããæã«æãããã
- TouchableWithoutFeedback ãã¿ããæã«äœãããªã
<TouchableNativeFeedback onPress={props.onPress}>
<View style={styles.listItem}>some contents</View>
</TouchableNativeFeedback>
# ScrollView
ã¹ã¯ããŒã«ãå¿ èŠãªå Žå㯠View ã®æ¿ããã« ScrollView ã³ã³ããŒãã³ãã䜿çšããã ãã ãã倧éã®ããŒã¿ã衚瀺ããå Žåã¯ãããå¹çç㪠FlatList ã SectionList ã䜿ãããšã
# FlatList
- é åã data ã«æž¡ããé åã¯ãkey ãšããããããã£ãæã£ããªããžã§ã¯ãã®é åã§ããããšã
- renderItem ã«è¡šç€ºå 容ãèšè¿°ãããinfo.item ã§åã ã®ãªããžã§ã¯ãã«ã¢ã¯ã»ã¹ã§ããã
<FlatList
style={styles.container}
data={props.places}
renderItem={info => (
<ListItem
placeName={info.item.name}
onPress={() => props.onItemDeleted(info.item.key)}
/>
)}
/>
# ã¹ã¿ãã£ãã¯ç»å
jpg ç»åçã®éçç»åã衚瀺ããæ¹æ³ã
- import æã§ç»åãã€ã³ããŒãããã
- ãããšãImageURISource ãšããã€ã³ã¿ãŒãã§ãŒã¹ãæã€ãªããžã§ã¯ããèªåçã«çæãããã
- ããã Image ã³ã³ããŒãã³ãã«æž¡ãã
<Image source={importedImage} />
衚瀺æ¹æ³ã¯ããã©ã«ã㧠Cover ã«ãªã£ãŠããã
https://facebook.github.io/react-native/docs/image#resizemode
# ãã€ãããã¯ç»å
ãªã³ã©ã€ã³äžã®ç»åçã®å Žåã¯ãäžèšã®ããã« ImageURISource ãæåã§äœæããImage ã³ã³ããŒãã³ãã«æž¡ãã
ãã€ãããã¯ç»åã®å Žåã¯ãheight
ãš width
ãæå®ããªããšè¡šç€ºãããªãã®ã§æ³šæããããšã
{
uri: 'https://images.fineartamerica.com/some.jpg';
}
# Modal
ç¹ã«ç¹èšäºé ãªããã¢ãŒãã«ã衚瀺ããç¶æ ã§ãªããŒããããšä»®æ³ç«¯æ«ããã³ã°ãããã°ãããã®ã§æ³šæã
https://facebook.github.io/react-native/docs/modal
<Modal onRequestClose={() => onClose()} animationType="slide" />
# ã¹ã¿ã€ãªã³ã°
# StyleSheet
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'flex-start',
},
input: {
width: 300,
borderColor: 'gray',
borderWidth: 0,
},
});
-
flex:1 ãæå®ãããšãå©çšå¯èœãªãã¹ãŠã®ç¯å²ãåãå°œãããæå®ããªããã°ãæå°éã®ç¯å²ãå æããã
TextInput çã«ã¯ã¹ã¿ã€ã«ã®èšå®é ç®ãå°ãªããã¹ã¿ã€ã«ãèšå®ãããšãã¯ãView ã ScrollView ã§å²ãã§èšå®ããã
è€æ°ã®ã¹ã¿ã€ã«
style å±æ§ã«ã¯è€æ°ã®ã¹ã¿ã€ã«ãé åã§æå®ã§ãã
<View style={[someStyleObject, { width: 100 }]} />
# Stylesheet.create ã䜿ãæå³
- Validation ãè¡ããã
- å¹ççãªãã€ãã£ãã³ãŒãã«å€æããã
# ã¹ã¿ã€ã«ãé©çšã§ããã³ã³ããŒãã³ã
ImageãScrollViewãTextãView ã®ïŒã€ã ã
# åå©çšå¯èœæ§ã®é«ã width ã®æå®
å éšã³ã³ãã³ã㯠width100%ã«ããŠãcontainer(View ãªã©)ã« width80%ãªã©ãæå®ãããšã移æ€ã楜ã«ãªãã
# ã«ã¹ã¿ã ã³ã³ããŒãã³ããšã¹ã¿ã€ã«ã®ç¶æ¿
ãã䜿ãã³ã³ããŒãã³ãã¯ã«ã¹ã¿ã ã³ã³ããŒãã³ããšããŠçšæããŠãããšè¯ã(components/UI ãã©ã«ããåç §)ãäžèšã¯ããããããã¹ã¿ã€ã«ãèšå®ããã TextInput ãäœæããå Žåã®äŸã
const DefaultInput = (props: TextInputProps) => {
return (
<TextInput
{...props}
style={[
styles.input,
// ã³ã³ããŒãã³ãã®å€åŽããäžéšã®ã¹ã¿ã€ã«ãå€æŽã§ããããã«ãã
props.style,
]}
underlineColorAndroid="transparent"
/>
);
};
const styles = StyleSheet.create({
input: {
width: '100%',
borderWidth: 1,
borderColor: '#eee',
padding: 4,
marginTop: 8,
marginBottom: 8,
},
});
# Text ã³ã³ããŒãã³ãã®ã¹ã¿ã€ã«ç¶æ¿
Text ã³ã³ããŒãã³ããå ¥ãåã«ãããšãäžäœã® Text ã®ã¹ã¿ã€ã«ãé äžã®å šãŠã® Text ã«ç¶æ¿ãããã ããšãã° BlackText ãšããã³ã³ããŒãã³ããäœã£ãŠããã°ãããã§å²ãã ãã§é äžã®å šãŠã® Text ãé»ã«ãªãã
# èæ¯ã«ç»åã衚瀺ãã
ImageBackground ã䜿ãã
https://facebook.github.io/react-native/docs/images#background-image-via-nesting
# ã«ã¹ã¿ã ãã¿ã³
Touchable,View,Text ãçµã¿åãããŠäœãã
<TouchableOpacity onPress={props.onPress}>
<View {...props} style={[styles.button, { backgroundColor: props.color }]}>
<Text>{props.children}</Text>
</View>
</TouchableOpacity>
# Platform API
OS ã®çš®é¡çã«ãã£ãŠæåãå€æŽããéã«äœ¿çšããã
if (Platform.OS === 'ios') {
return (
<TouchableOpacity onPress={props.onPress}>{content} </TouchableOpacity>
);
}
return (
<TouchableNativeFeedback onPress={props.onPress}>
{content}
</TouchableNativeFeedback>
);
# ã¯ãã¹ãã©ãããã©ãŒã 㪠UI ã©ã€ãã©ãª
NativeBase ãªã©ã䜿ããšããããã
# Dimensions API
ç»é¢ãµã€ãºãååŸããããããŒããŒã·ã§ã³ã®æ€ç¥ããããããéã«äœ¿çšãã
- Dimenstion API
- get() current dimentions
- windowïŒâ» android ã§ã¯ã¡ãã¥ãŒããŒãå«ãŸãªãïŒ
- screenïŒâ» android ã§ã¯ã¡ãã¥ãŒããŒãå«ãïŒ
- listen to Dimention Changes
- addEventListener('change')
- get() current dimentions
ç»é¢ã®é«ããå¹ ã«ãã£ãŠã¹ã¿ã€ã«ãå€æŽãã ç»é¢ã®é«ãã«ãã£ãŠ State ãæŽæ°ããã€ãã³ããªã¹ããŒããDimensions ã«ç»é²ããã
componentDidMount = () => {
this.checkWindowHeight();
Dimensions.addEventListener('change', this.checkWindowHeight);
};
componentWillUnmount = () => {
Dimensions.removeEventListener('change', this.checkWindowHeight);
};
checkWindowHeight = () => {
if (Dimensions.get('window').height > 500) {
this.setState({ hasEnoughHeight: true });
} else {
this.setState({ hasEnoughHeight: false });
}
};
ã³ã³ããŒãã³ãã®ã¹ã¿ã€ã«ã¯ãrender ã¡ãœããã®äžã§ãState ã®ç¶æ ã«ãã£ãŠåçã«å€æŽããã
const passwordsContainerStyle = {
flexDirection: hasEnoughHeight ? 'column' : 'row',
};
# TextInput ã®è«žèšå®
TextInput ã®æåã«ã€ããŠã¯ãautoCapitalize, autoCorrect, keyboardType, secureTextEntry ãªã©ã䟿å©ãªèšå®é ç®ãããããããã®ã§ãããã¥ã¡ã³ããããåç §ããããšã
https://facebook.github.io/react-native/docs/textinput
# KeyboardAvoidingView
View ã®ä»£ããã« KeyboardAvoidingView ã䜿ããšãããŒããŒãã§èŠçŽ ãé ããããšããªããªãã Keyboard ãç»é¢äžã«ãã¶ããã®ã§ã¯ãªããKeyboard ã®é«ããé€å€ããç¯å²ã§ View ãã¬ã³ããªã³ã°ããããScrollView ã«å¯ŸããŠã¯åºæ¬çã«äœ¿ãå¿ èŠããªãã
# Keyboard API
ããŒããŒããæ¶ããããªã©ãããŒããŒããæäœããããšã㯠Keyboard API ã䜿ãã äŸãã°ãäžèšã®ã³ãŒãã§èŠçŽ ãå²ãã°ãèŠçŽ ã®ç¯å²å€ãã¿ããããæã«ããŒããŒããèªåçã«é ãããããã«ãªãã
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
# 芪ã«ãã£ããããã
StyleSheet.absoluteFill
ãããã¯StyleSheet.absoluteFillObject
ã䜿ãã
ã©ã¡ãããtop/right/bottom/left ã 0 ã«ãPosition ã Absolute ã«èšå®ããŠãããã åè 㯠Registerd Style(å®éã«ã¯ãã ã® number)ãè¿ãã®ã«å¯ŸããåŸè ã¯ãªããžã§ã¯ããè¿ãã
<View style={StyleSheet.absoluteFill} />;
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
});
# ã¢ãã¡ãŒã·ã§ã³
# åºæ¬èšå®
詳现ã¯ããã¥ã¡ã³ããèªãããšã
https://facebook.github.io/react-native/docs/animations
ã¢ãã¡ãŒã·ã§ã³ãããèŠçŽ ã Animated.View ã§å²ãã
Animated.View ã® style ã« state ãèšå®ããã
<Animated.View style={{ opacity: this.state.fadeAnim, }} >
state ã¯ã
new Animated.Value()
ã§èšå®ããããããåæå€ã«ãªããstate = { fadeAnim: new Animated.Value(1), };
ã¢ãã¡ãŒã·ã§ã³ãéå§ãããã¿ã€ãã³ã°ã§ã
Animated.timing().start()
ãªã©ãçºç«ãããstate ã®å€ã¯ã¢ãã¡ãŒã·ã§ã³çµäºåŸãç¶æããããAnimated.timing(this.state.fadeAnim, { toValue: 0, // ãã®å€ã¯ã¢ãã¡ãŒã·ã§ã³çµäºåŸãä¿æããã duration: 200, useNativeDriver: true, // for performance }).start();
# Interpolation
Animated.value ã®å€ããå¥ã®åœ¢ã«å€æŽããããšãã¯ãinterpolate ã䜿ãã äžèšã®äŸã§ã¯ãvalue ã 0 ã®ãšãã« 100ã1 ã®æã« 200 ãåºåããã
const width = fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [100, 200],
}),
# HTTP ãªã¯ãšã¹ã
fetch ãš XMR ã®ã©ã¡ãã䜿ãããšãã§ããã
# Redux
Redux åã³ãã® Middleware ã®å®è£ æ¹æ³ã¯ãWeb ã¢ããªãäœããšããšåãããã ããreact-native-navigation ãªã©ãããã²ãŒã·ã§ã³ã®å€éšã©ã€ãã©ãªã䜿ãå Žåã¯ã©ã€ãã©ãªç¬èªã®æ¹æ³ã§èšå®ããå¿ èŠãããã
# ãµãŒãããŒãã£ã©ã€ãã©ãª
ãµãŒãããŒãã£ã®ã©ã€ãã©ãªãå©çšããã«ã¯ãnpm ã§ã®ã€ã³ã¹ããŒã«ä»¥å€ã«ãæåã§ã®äœæ¥ãå¿ èŠã«ãªãããšããããGithub ããŒãžã«æé ãèšèŒãããŠããããšãå€ãã®ã§ãããèªãããšã
# èªåã§ã€ã³ã¹ããŒã«ããå Žå
ã»npm ã§ã©ã€ãã©ãªãã€ã³ã¹ããŒã«
ã»react-native link
ãå®è¡ããïŒããŸããããªãå Žåãå€ãïŒ
# æåã§ã€ã³ã¹ããŒã«ããå Žåã®å žåçãªæé ïŒiPhoneïŒ
- npm ã§ã©ã€ãã©ãªãã€ã³ã¹ããŒã«
- Xcode 㧠ios/***.xcodeprpj ãéã
- ã©ã€ãã©ãªããããžã§ã¯ãã«è¿œå ãã
- Libraries ãã©ã«ããå³ã¯ãªãã¯ãã
add libraries to PROJECT_NAME
ãã¯ãªãã¯ãã - node_modules å ã®ã©ã€ãã©ãªã®ãã©ã«ãããã***.xcodeproj ãã¡ã€ã«ãæ¢ããŠéžæãããïŒios ãšãããã©ã«ããããã¯ã«ãŒããã©ã«ãã«ããããšãå€ãïŒ
- Libraries ãã©ã«ããå³ã¯ãªãã¯ãã
- ã©ã€ãã©ãªããã«ãããã»ã¹ã«è¿œå ãã
- Xcode ã§ã«ãŒããã©ã«ããã¯ãªãã¯ãããBuild Phasesãã¿ããéžæãã
- Link Binary with Libraries ãéããŠïŒãã¿ã³ãã¯ãªãã¯ãã
- ã©ã€ãã©ãªåãæ€çŽ¢ããŠè¿œå ãã
- Github ã®ããã¥ã¡ã³ãã確èªããã©ã€ãã©ãªåºæã®äœæ¥ãè¡ãã
# æåã§ã€ã³ã¹ããŒã«ããå Žåã®å žåçãªæé ïŒAndroidïŒ
npm ã§ã©ã€ãã©ãªãã€ã³ã¹ããŒã«
settings.gradle ã«äžèšã®è¡ãè¿œå ãããã©ã®ã©ã€ãã©ãªã§ãèšè¿°ã¯ããããåãã
include ':react-native-vector-icons' project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
app/build.gradle ã«äžèšã®è¡ãè¿œå ãã
implementation project(':react-native-vector-icons')
MainApplication.java ã«äžèšã®è¡ãè¿œå ãã
import com.oblador.vectoricons.VectorIconsPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new VectorIconsPackage() ); }
Github ã®ããã¥ã¡ã³ãã確èªããã©ã€ãã©ãªåºæã®äœæ¥ãè¡ãã
# react-native-navigation
ãã€ãã£ãã¢ããªã§ã¯ URL ã«ããã«ãŒãã£ã³ã°ã¯è¡ããªãã 代ããã«ãã¿ããã¹ã¿ãã¯ãçšããããã²ãŒã·ã§ã³ãè¡ãã https://facebook.github.io/react-native/docs/navigation
- react-navigationïŒãã°ãå€ãïŒ
- native-navigationïŒAirbnb ãäœã£ãŠããïŒ
- react-native-navigation.ïŒWix ãäœã£ãŠããããããããããïŒ
# react-native-navigation ã®ã€ã³ã¹ããŒã«
# iOS
https://wix.github.io/react-native-navigation/#/installation-ios
ã決ãŸãã®æé ã«å ãã2 ã€ã»ã©äœæ¥ãå¿ èŠã
# Android
https://wix.github.io/react-native-navigation/#/installation-android
ã決ãŸãã®æé ã«å ããããã€ãã®äœæ¥ãå¿ èŠã
# ããã²ãŒã·ã§ã³ã®åºæ¬
https://wix.github.io/react-native-navigation/#/top-level-api
react-native-navigation ã䜿çšããå Žåã¯ãã³ã³ããŒãã³ãã®åæ衚瀺ã®æ¹æ³ãå€ããã äžèšã® 2 ã€ãããã°ã©ããã£ãã¯ã«è¡ãå¿ èŠãããã
- ã¹ã¯ãªãŒã³ïŒã³ã³ããŒãã³ãïŒã®ç»é²
- ã¹ã¯ãªãŒã³ã®è¡šç€º
react-native ã® AppRegistry ã¯äœ¿çšããªãã screens ãã©ã«ãã«ã³ã³ããŒãã³ããé 眮ãããããã«é 眮ããã³ã³ããŒãã³ãã¯éåžžã®ã³ã³ããŒãã³ãã ããããã²ãŒã·ã§ã³ã«ãã£ãŠè¡šç€ºããããšããç¹ã§ãéåžžã®ã³ã³ããŒãã³ããšã¯ç°ãªãã
# ã¹ã¯ãªãŒã³ã®ç»é²
ã¢ããªã§äœ¿çšããå šãŠã®ã¹ã¯ãªãŒã³ïŒã³ã³ããŒãã³ãïŒããApp.tsx å ã§ãããããç»é²ããŠããã
// App.tsx
Navigation.registerComponent('myproject.AuthScreen', () => AuthScreen);
# startSingleScreenApp
ããã²ãŒã·ã§ã³ã€ãã³ãã®çºçæã«ãstartTabBasedApp ã startSingleScreenApp ãçºç«ãããã ãã ããèµ·åæã®ããã©ã«ãç»é¢ã«ã€ããŠã¯ãApp.tsx å ãªã©ã§ãçŽæ¥çºç«ãããã
// App.jsx
Navigation.startSingleScreenApp({
screen: {
screen: 'myproject.AuthScreen',
title: 'login',
},
});
// index.js;
import App from './src/App';
# startTabBasedApp
startSingleScreenApp ãšèãæ¹ã¯åãã
const mapIcon = await Icon.getImageSource('map', 30);
const shareIcon = await Icon.getImageSource('share', 30);
Navigation.startTabBasedApp({
tabs: [
{
screen: 'myproject.FindPlaceScreen',
label: 'Find Place', // ã¿ãã«è¡šç€ºããã
title: 'Find Place', // Navbarã«è¡šç€ºããã
icon: mapIcon, // Androidã§ã¯å¿
é
},
{
screen: 'myproject.SharePlaceScreen',
label: 'Share Place', // ã¿ãã«è¡šç€ºããã
title: 'Share Place', // Navbarã«è¡šç€ºããã
icon: shareIcon,
},
],
});
# Stack
ã¹ã¿ãã¯ïŒã«ã¬ã³ãã¹ã¯ãªãŒã³ã®äžã«ããŒãžãä¹ããŠããæ¹æ³ïŒã䜿ãããå Žåã¯ãäžèšã®ããã«ããã ãªããnavigator API ã¯ãå šãŠã® screen ã«ãããŠãprops.navigator ã§ååŸã§ããã passProps ãæå®ããããšã§ãä»»æã® props ãã¹ã¿ãã¯ãããã¹ã¯ãªãŒã³ã«æž¡ãããšãã§ããã
// äœææ
this.props.navigator.push({
screen: 'myproject.PlaceDetailScreen',
title: place.name,
animationType: 'slide-horizontal',
passProps: {
place,
},
});
// åé€æ
this.props.navigator.pop();
# Drawer
startTabBasedApp ããã㯠startSingleScreenApp ã§ãdrawer ãªãã·ã§ã³ãæå®ããã ãŸããããã¯ãŒãééããããã® navigatorButtons ãåã¹ã¯ãªãŒã³ã«è¡šç€ºããã
import Icon from 'react-native-vector-icons/FontAwesome';
const barsIcon = await Icon.getImageSource('bars', 30);
Navigation.startTabBasedApp({
tabs: [
{
navigatorButtons: {
leftButtons: [
{
id: 'sidebar-toggle-button',
icon: barsIcon,
},
],
},
},
],
drawer: {
left: {
screen: 'myproject.SidebarScreen',
},
},
});
ãã°ã«ã®æäœã¯ãnavigatorButtons ãæž¡ããåã¹ã¯ãªãŒã³ã§ãsetOnNavigatorEvent ã䜿ã£ãŠè¡ãã
constructor(props: Props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.handleNavigatorEvent);
}
handleNavigatorEvent = (e: NavigatorEvent) => {
if (e.type === 'NavBarButtonPress' && e.id === 'sidebar-toggle-button') {
this.props.navigator.toggleDrawer({ side: 'left' });
}
};
# ã¿ãã®ã¹ã¿ã€ã«
startTabBasedApp ã§èšå®ãã
https://wix.github.io/react-native-navigation/#/top-level-api?id=starttabbasedappparams
Navigation.startTabBasedApp({
tabsStyle: {
tabBarSelectedButtonColor: 'orange',
},
appStyle: {
// for android
tabBarSelectedButtonColor: 'orange',
},
});
# ããã²ãŒã·ã§ã³ã®ã¹ã¿ã€ã«
åã¹ã¯ãªãŒã³ã§ static navigatorStyle ãå®çŸ©ããŠè¡ãã
https://wix.github.io/react-native-navigation/#/styling-the-navigator
class FindPlaceScreen extends React.Component<Props> {
static navigatorStyle = {
navBarButtonColor: 'orange',
};
}
# react-native-maps
# ã€ã³ã¹ããŒã«
- SDK Manager ãã Google Play Service ãã€ã³ã¹ããŒã«ããã
com.google.android.gms:play-services-base|maps
ã®ããŠã³ããŒãã«å€±æããã®ã§ãã«ãŒãã¬ãã«ã® build.grade ã®ãallProjects.repositories
ã«google()
ãè¿œå ããŠããã- play-services ã®ããŒãžã§ã³ã¯äžèšãåèã«ããã10.2.6 以äžã§ã¯åããªãã£ãã https://developers.google.com/android/guides/releases
- å ¬åŒãµã€ããåèã«ã€ã³ã¹ããŒã«ãããreact-native link ã¯äœ¿ããªãã
# 䜿ãæ¹
å ¬åŒãµã€ã (opens new window)ã«å šãŠæžããŠããã
# ãºãŒã ïŒDeltaïŒã®èšå®
æå³ãããããããªãããäžèšã®ããã«ããŠããã° OK ã¿ããã
const region = {
latitude: 35.0,
longitude: 135.0,
latitudeDelta: 0.0122,
longitudeDelta:
0.0122 * (Dimensions.get('window').width / Dimensions.get('window').height),
};
# ã¡ãœãã
äžèšã®ããã«ããããã§ãthis.map.***
ã®åœ¢ã§åŒã³åºããã
<MapView ref={ref => (this.map = ref)} />
MapView ã®ã¡ãœããäŸ (opens new window)
# äœçœ®æ å ±ã®ååŸ
ãŸãæš©éãèšå®ãã
# Android
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
# iPhone
Info.plist => add row => Privacy â Location Usage Descriptor ãè¿œå ãããå€ã«ã¯ãäœçœ®æ å ±ååŸæã«ãŠãŒã¶ã«è¡šç€ºããã¡ãã»ãŒãžãå ¥åããŠããã
ãã®åŸãnavigator ãªããžã§ã¯ãã䜿ã£ãŠäœçœ®ãååŸãããweb ãšåã navigator ãªããžã§ã¯ãã䜿ããã®ã¯ãReactNative ããšãã¥ã¬ãŒãããŠããããã
navigator.geolocation.getCurrentPosition()
# react-native-image-picker
# ã€ã³ã¹ããŒã«æ¹æ³ã»äœ¿ãæ¹
å ¬åŒãµã€ãã«æ²¿ã£ãŠèšå®ããã°ç¹ã«ã€ãŸããéšåã¯ãªãã
# ãµã ãã€ã«ã®è¡šç€º
uri ãèªåçã«çæãããã®ã§ããã®ãŸãŸ Image ã³ã³ããŒãã³ãã«æµã蟌ãã°ããã
ImagePicker.showImagePicker(options, (response: any) => {
let pickedImage = { uri: response.uri };
this.setState({
pickedImage,
});
// ãªããbase64ããŒã¿ãååŸãããå Žåã¯äžèšã®ããã«ãã
const base64Image = response.data;
});
<Image source={this.state.pickedImage} />;